layui表格集成select选择框和switch开关
前言在前文 layui表格使用自定义模板templet中,我们已经初步感受了layui表格使用自定义模板的基础操作。现在,在自定义模块应用的基础上,我们进一步丰富layui表格对其他组件的集成。觉得本文有所帮助的朋友们,请不吝点出你的赞。layui表格中集成select下拉选择框和switch开关 效果图如下:本文中,表格将完全使用静态数据渲染,数据如下:[{"id": 1,"name": "iP
前言
在前文 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 [
'<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/springboot-layui-demo 了
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>
更多推荐
所有评论(0)