自定义layui table列
最近遇到一个需求，要求可以用户自己配置layui Table的列名并可以存成模板，下次进来默认渲染成用户自定义的表格
先看Demo
- 实现这个需求用到了layui的两个组件 transfer table
具体思路为：
- 弹窗显示穿梭框，穿梭框是这个表格的所有列名
- 选中之后，关闭弹窗回调选中的列名
- 在表格配置中重新render
- 实现
2.代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="layui-v2.5.7/layui/css/layui.css">
<script src="js/jquery-3.4.1.min.js"></script>
<script src="layui-v2.5.7/layui/layui.js"></script>
</head>
<body>
<div id="transferBox" class="demo-transfer"></div>
<br /><br />
<button id="getData" class="layui-btn layui-btn-normal">生成</button>
<br /><br />
<table id="diyTable" lay-filter="test"></table>
</body>
</html>
<script>
var colJson = [{
field: 'id',
title: 'ID',
width: 80,
sort: true,
fixed: 'left'
},
{
field: 'username',
title: '用户名',
width: 80
},
{
field: 'sex',
title: '性别',
width: 80,
sort: true
},
{
field: 'city',
title: '城市',
width: 80
},
{
field: 'sign',
title: '签名',
width: 177
},
{
field: 'experience',
title: '积分',
width: 80,
sort: true
},
{
field: 'score',
title: '评分',
width: 80,
sort: true
},
{
field: 'classify',
title: '职业',
width: 80
},
{
field: 'wealth',
title: '财富',
width: 135,
sort: true
}
];
layui.use(['table', 'transfer', 'util', 'layer'], function() {
var table = layui.table;
var transfer = layui.transfer;
var layer = layui.layer;
var util = layui.util;
var tableIns = table.render({
elem: '#diyTable',
height: 312,
url: '/demo/table/user/',
toolbar: '#toolbarDemo',
defaultToolbar: ['filter', 'exports', 'print'],
page: true,
cols: [colJson]
});
transfer.render({
elem: '#transferBox',
data: colJson,
parseData: function(res) {
return {
"value": res.field,
"title": res.title
}
},
id: 'transferBox'
})
$("#getData").click(function() {
var getData = transfer.getData('transferBox');
colJson = [];
$(getData).each(function(i, item) {
console.log(item);
var fieldItem = {
field: item.value,
title: item.title
};
colJson.push(fieldItem);
})
var tableIns = table.render({
elem: '#diyTable',
height: 312,
url: '/demo/table/user/',
toolbar: '#toolbarDemo',
defaultToolbar: ['filter', 'exports', 'print'],
page: true,
cols: [colJson]
});
})
});
</script>