layui table组件常见用法总结

table是 layui 最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作,涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右,支持拖拽改变列宽度,支持排序,支持多级表头,支持单元格的自定义模板,支持对表格重载(比如搜索、条件筛选等),支持复选框,支持分页,支持单元格编辑等等一些列功能。

下边整理了一个例子:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>layer学习</title>
	<link href="/Content/mycss.css" rel="stylesheet" />
	<link href="/Content/layui/css/layui.css" rel="stylesheet" />
	<script src="/Content/layui/layui.js"></script>
</head>

<body>
<!--表格-->
<div id="myTable" lay-filter="test"></div>
<!--工具栏-->
<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="allow">
	<!-- 这里的 checked 的状态只是演示 -->
	<input type="checkbox" name="{{d.Id}}" value="{{d.Id}}" title="允许" lay-filter="allowSetFilter"{{ 
	d.IsAllow==t rue ? 'checked' : '' 
	}}>
</script>
<script>
layui.use(['table', 'form'], function() {
	var table = layui.table;
	form = layui.form;
	//*******************************渲染表格**********************************
	table.render({
		//------------------------核心参数
		elem: '#myTable' //渲染的dom元素
			,
		url: '/Home/GetUserList' //异步请求接口
			,
		page: true //开启分页
			,
		id: 'elementID' //容器唯一ID
			,
		cols: [
			[ //列设置
				{
					field: 'Id',
					title: '编号',
					sort: true,
					fixed: 'left'
				}, {
					field: 'Name',
					title: '姓名'
				}, {
					field: 'Age',
					title: '年龄'
				}, {
					field: 'Role',
					title: '角色'
				}, {
					field: 'CreateTime',
					title: '创建时间'
				}, {
					title: '自定义模板',
					width: 200,
					templet: function(d) {
					return '姓名:<span style="color: #c00;">' + d.Name + '</span>'
					}
				}, {
					field: 'IsAllow',
					title: '是否使用',
					templet: '#allow',
					unresize: true,
					align: 'center'
				}, {
					fixed: 'right',
					width: 150,
					align: 'center',
					toolbar: '#barDemo'
				}
			]
		]

		//-----------------------------异步请求设置
		,
		method: 'post' //异步请求方式
			,
		headers: {
			hello: 'hengheng'
		} //在request的header中添加数据
		,
		request: { //request设置,默认值如下
			pageName: 'page',
			limitName: 'limit'
		},
		response: { //response设置,默认值如下
			statusName: 'code',
			countName: 'count',
			dataName: 'data',
			msgName: 'msg'
		},
		where: { //向后台添加的额外参数
			nameParm: 'u',
			roleParm: 'o'
		}
		//-----------------------加载的其他选项
		,
		done: function(res, curr, count) {
			//res为接口返回的数据、count为数据总长度
			console.log(res);
			console.log(curr);
			console.log(count);
		},
		text: {
			none: '暂无相关数据' //默认:无数据。
		},
		initSort: {
			field: 'Id' //排序字段为Id
				,
			type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
		}
	})

	//*******************************监听表格**********************************

	table.on('tool(test)', function(obj) { //test为lay-filter值
		var data = obj.data; //获得当前行数据
		var layEvent = obj.event; //获得 lay-event
		var tr = obj.tr; //获得当前行 tr 的DOM对象

		if(layEvent === 'edit') {
			var id = data.Id;
			layer.open({
				type: 2,
				title: '修改' //标题栏
					,
				scrollbar: false,
				area: ['400px', '300px'],
				shade: 0.5,
				id: 'layerId' //设定一个id,防止重复弹出
					,
				moveType: 1 //拖拽模式,0或者1
					,
				content: '/Home/EditUserInfo?id=' + id
			});
		} else if(layEvent === 'del') {
			layer.confirm('真的删除吗?', function(index) {
				obj.del(); //删除对应行(tr)的DOM结构
				layer.close(index);
				var id = data.Id; //向服务端发送删除指令
				$.post("/Home/DeleteUserInfo", {
					"id": id
				}, function(result) {
					if(result.IsSuccess === 1) {
						layer.msg(result.Msg);
						table.reload('elementID');
					} else {
						layer.msg(result.Msg);
						table.reload('elementID');
					}
				})
			});
		}
	});

	//*******************************监听checkbox********************************
	//监听操作----置顶
	form.on('checkbox(allowSetFilter)', function(obj) {
		var pre = {
			"Id": this.name,
			"IsAllow": obj.elem.checked
		};
		//alert(this.name+'----'+obj.elem.checked);
		$.post('/Home/SetAllow', pre, function(result) {
			if(result.IsSuccess === 1) {
				layer.msg(result.msg)
			} else {
				layer.msg(result.msg)
			}
		})
	});

});
</script>
</body>

</html>

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是layui table组件常见用法总结的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » Layui 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏