自定义layui table列

最近遇到一个需求,要求可以用户自己配置layui Table的列名并可以存成模板,下次进来默认渲染成用户自定义的表格
先看Demo

  1. 实现这个需求用到了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>

你可能感兴趣的:(如何使用Layui,layui)