【前端系列-4】layui表格集成select选择框和switch开关
前言
在前文 layui表格使用自定义模板templet中，我们已经初步感受了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 [
' value + '">',
'',
'',
'',
''
].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 [
' value + '">',
'',
'',
'',
''
].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>