【前端系列-4】layui表格集成select选择框和switch开关
时间:2022-07-25
本文章向大家介绍【前端系列-4】layui表格集成select选择框和switch开关，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。
前言
在前文中，我们已经初步感受了layui表格使用自定义模板的基础操作。现在，在自定义模块应用的基础上，我们进一步丰富layui表格对其他组件的集成。
觉得本文有所帮助的朋友们，请不吝点出你的赞。
layui表格中添加select下拉选择框和switch开关 效果图如下：
本文中，表格将完全使用静态数据渲染，数据如下：
[
{
"id": 1,
"name": "iPhone",
"type": 0,
"price": 6000.0,
"size": 55,
"status": 0,
"description": "说明"
},
{
"id": 2,
"name": "watch",
"type": 1,
"price": 500.0,
"size": 35,
"status": 1,
"description": "说明"
},
{
"id": 3,
"name": "television",
"type": 1,
"price": 1000.0,
"size": 90,
"status": 1,
"description": "说明"
},
{
"id": 4,
"name": "computer",
"type": 1,
"price": 4500.0,
"size": 60,
"status": 1,
"description": "说明"
}
]1 switch
1.1 展示switch
在表格中展示switch开关，关键也在于templet
table.render({
elem: '#test_table'
, id: 'testReload'
, even: true //开启隔行背景
, data: data
, size: 'lg'
, title:商品详情表'
, cols:
[[{field: 'id', title: '编号', width: 60, align: 'center'}
, {field: 'type', title: '类 型', width: 150, align: 'center', templet: fn1('type')}
, {field: 'name', title: '商品名称', width: '12%', align: 'center'}
, {field: 'price', title: '价 格', width: '9.1%', align: 'center'}
, {field: 'size', title: '数 量', width: '9.5%', align: 'center'}
, {field: 'status', title: '状 态', width: 120, align: 'center', templet: '#status'}
, {field: 'description', title: '说 明', align: 'center'}
, {
fixed: 'right',
title: '操作',
toolbar: '#test_lineBar',
width: 120,
align: 'center'
}
]]
});我们看上面table的渲染实现，status这一列使用了templet，绑定了#status，显然是使用了模板选择器，我们看一下模板做了什么事：
<script type="text/html" id="status">
{{# if(d.status==1){ }}
<input type="checkbox" name="status" lay-skin="switch" checked lay-text="正常|禁售" value={{ d.status }}
lay-filter="status">
{{# } else { }}
<input type="checkbox" name="status" lay-skin="switch" lay-text="正常|禁售" value={{ d.status}}
lay-filter="status">
{{# } }}
</script>一看便知，这段模板根据数据的status值，去渲染了一个switch，如果status=1，则switch为选中状态，否则为未选中状态。
1.2 修改switch
如果到此为止，那么这个switch仅仅能看而已，不信我们加一个编辑按钮监听事件，弹出所在行数据。
table.on('tool(test_bar)', function (obj) {
var data = obj.data;
var layEvent = obj.event;
switch (layEvent) {
case 'edit':
layer.alert(JSON.stringify(data));
break;
}
});实践发现，就算修改了【状态】这一栏的开关状态，弹出的数据中，status的值一直不变。
那么，我们怎么通过点击switch，将数据修改呢？
有两个思路，其一是，监听switch点击事件，获取当前switch状态，直接向后端发起修改行数据的请求，这里很容易实现，以后展开说。
另一个思路就是，监听switch点击事件，修改table的cache。
// 监听开关事件
form.on('switch(status)', function (data) {
var status = this.checked ? 1 : 0;
console.log("status->>>>>>>>>>>>>>", status);
console.log("data->>>>>>>>>>>>>>", data);
modifyTableCacheBySwitch(data, status);
});
// 更新table的cache
function modifyTableCacheBySwitch(data, status) {
var table = layui.table;
var switchElem = $(data.elem);
var tdElem = switchElem.closest('td');
var trElem = tdElem.closest('tr');
var tableView = trElem.closest('.layui-table-view');
table.cache[tableView.attr('lay-id')][trElem.data('index')][tdElem.data('field')] = status;
}到此再次弹出当前行的数据，发现status的值已更新，这样将当前行的数据整体提交给后端就达到了更新数据的目的。
2 select
2.1 展示select
在前面 table.render 中，type这一列，也绑定了templet：
{field: 'type', title: '类 型', width: 150, align: 'center', templet: fn1('type')}我们看一下，这个模板实现了什么：
var fn1 = function (field) {
return function (data) {
var value = data[field];
return [
'<select name="type" lay-filter="type" lay-search="true" value="' + value + '">',
'<option value="" >请选择状态</option>',
'<option value="0"' + (value === 0 ? 'selected' : '') + '>国产</option>',
'<option value="1"' + (value === 1 ? 'selected' : '') + '>进口</option>',
'</select>'
].join('');
};
};另外，还需要引用 layui社区高手 岁月小偷 提供的插件，我已经附在项目内，上传到GitHub中https://github.com/ThinkMugz/mudemo 了
layui.extend({optimizeSelectOption: 'layui/plugin/optimizeSelectOption/optimizeSelectOption'})
.use(['table', 'layer', 'form', 'optimizeSelectOption'], function () {2.2 修改select
与switch同理，select也需要监听事件，当进行下拉选择框选择后，更新table的cache：
// 监听下拉框选择事件修改表格缓存
form.on('select(type)', function (data) {
console.log("data->>>>>>>>>>>>>>>>", data);
var selectElem = $(data.elem);
var tdElem = selectElem.closest('td');
var trElem = tdElem.closest('tr');
var tableView = trElem.closest('.layui-table-view');
table.cache[tableView.attr('lay-id')][trElem.data('index')][tdElem.data('field')] = data.value;
});3 完整代码
test.html的完整代码如下，完整的项目请到 github https://github.com/ThinkMugz/mudemo 中获。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试页面</title>
<link rel="stylesheet" href="layui/css/layui.css" media="all"/>
</head>
<body>
<div>
<table id="test_table" lay-filter="test_bar"></table>
</div>
<script src="layui/layui.js"></script>
<script src="js/libs/jquery-2.1.1.min.js"></script>
<script src="utils/common.js"></script>
<!--行工具按钮-->
<script type="text/html" id="test_lineBar">
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>
<script type="text/html" id="status">
{{# if(d.status==1){ }}
<input type="checkbox" name="status" lay-skin="switch" checked lay-text="正常|禁售" value={{ d.status }}
lay-filter="status">
{{# } else { }}
<input type="checkbox" name="status" lay-skin="switch" lay-text="正常|禁售" value={{ d.status}}
lay-filter="status">
{{# } }}
</script>
<script>
layui.extend({optimizeSelectOption: 'layui/plugin/optimizeSelectOption/optimizeSelectOption'})
.use(['table', 'layer', 'form', 'optimizeSelectOption'], function () {
var table = layui.table
, layer = layui.layer //弹层
, form = layui.form;
var fn1 = function (field) {
return function (data) {
var value = data[field];
return [
'<select name="type" lay-filter="type" lay-search="true" value="' + value + '">',
'<option value="" >请选择状态</option>',
'<option value="0"' + (value === 0 ? 'selected' : '') + '>国产</option>',
'<option value="1"' + (value === 1 ? 'selected' : '') + '>进口</option>',
'</select>'
].join('');
};
};
var data = [
{
"id": 1,
"name": "iPhone",
"type": 0,
"price": 6000.0,
"size": 55,
"status": 0,
"description": "说明"
},
{
"id": 2,
"name": "watch",
"type": 1,
"price": 500.0,
"size": 35,
"status": 1,
"description": "说明"
},
{
"id": 3,
"name": "television",
"type": 1,
"price": 1000.0,
"size": 90,
"status": 1,
"description": "说明"
},
{
"id": 4,
"name": "computer",
"type": 1,
"price": 4500.0,
"size": 60,
"status": 1,
"description": "说明"
}
];
table.render({
elem: '#test_table'
, id: 'testReload'
, even: true //开启隔行背景
, data: data
, size: 'lg'
, title:
'商品详情表'
, cols:
[[{field: 'id', title: '编号', width: 60, align: 'center'}
, {field: 'type', title: '类 型', width: 150, align: 'center', templet: fn1('type')}
, {field: 'name', title: '商品名称', width: '12%', align: 'center'}
, {field: 'price', title: '价 格', width: '9.1%', align: 'center'}
, {field: 'size', title: '数 量', width: '9.5%', align: 'center'}
, {field: 'status', title: '状 态', width: 120, align: 'center', templet: '#status'}
, {field: 'description', title: '说 明', align: 'center'}
, {
fixed: 'right',
title: '操作',
toolbar: '#test_lineBar',
width: 120,
align: 'center'
}
]]
});
table.on('tool(test_bar)', function (obj) {
var data = obj.data;
var layEvent = obj.event;
switch (layEvent) {
case 'edit':
layer.alert(JSON.stringify(data));
break;
}
});
// 监听下拉框选择事件修改表格缓存
form.on('select(type)', function (data) {
console.log("data->>>>>>>>>>>>>>>>", data);
var selectElem = $(data.elem);
var tdElem = selectElem.closest('td');
var trElem = tdElem.closest('tr');
var tableView = trElem.closest('.layui-table-view');
table.cache[tableView.attr('lay-id')][trElem.data('index')][tdElem.data('field')] = data.value;
});
// 监听开关事件
form.on('switch(status)', function (data) {
var status = this.checked ? 1 : 0;
console.log("status->>>>>>>>>>>>>>", status);
console.log("data->>>>>>>>>>>>>>", data);
modifyTableCacheBySwitch(data, status);
});
function modifyTableCacheBySwitch(data, status) {
var table = layui.table;
var switchElem = $(data.elem);
var tdElem = switchElem.closest('td');
var trElem = tdElem.closest('tr');
var tableView = trElem.closest('.layui-table-view');
table.cache[tableView.attr('lay-id')][trElem.data('index')][tdElem.data('field')] = status;
}
});
</script>
</body>
</html>
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- AkShare-债券数据-可转债
- AkShare-股票数据-基金持股
- AkShare-股票数据-股票更名
- AkShare-股票数据-终止和暂停上市股票
- AkShare-股票数据-股票列表
- AkShare-股票数据-板块详情
- AkShare-股票数据-板块行情
- AkShare-股票数据-流通股东
- SpringBoot系列之使用Spring Task实现定时任务
- AkShare-股票数据-分时数据
- AkShare-基金数据-基金行情数据
- AkShare-期权数据-商品期权
- AkShare-股票数据-破净股统计
- AkShare-股票数据-创新高和新低的股票数量
- AkShare-股票数据-A股个股市盈率、市净率和股息率