自定义layui table列

最新推荐文章于 2023-10-10 16:12:08 发布

忧天的杞人

最新推荐文章于 2023-10-10 16:12:08 发布

阅读量1.4k

点赞数 1

分类专栏：如何使用Layui 文章标签： layui

本文链接：https://blog.csdn.net/qq_17837497/article/details/118514746

版权

如何使用Layui 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

动画.gif

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

忧天的杞人

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义layui table列

最近遇到一个需求，要求可以用户自己配置layui Table的列名并可以存成模板，下次进来默认渲染成用户自定义的表格先看Demo实现这个需求用到了layui的两个组件 transfer table具体思路为：弹窗显示穿梭框，穿梭框是这个表格的所有列名选中之后，关闭弹窗回调选中的列名在表格配置中重新render实现2.代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8">
复制链接

扫一扫

专栏目录