layui数据表格史上最详细，手把手教你入门。很遗憾，layui下线，官网江湖再见，回归开源，对于我这种总是喜欢写jquery的后端开发者来说，这是个莫大的遗憾。
对于我这种总是喜欢写jquery的后端开发者来说，这是个莫大的遗憾。
git代码托管地址：https://gitee.com/sentsin/layui#%E7%9B%B8%E5%85%B3
前言:按照这篇文章步骤一点一点来，你不入门我入土。
1.基本使用
1.1准备json
layui官方提供的数据源传送门
开发工具为eclipse，创建保存json的文件夹users.json等项目基本所需的布局，如下图所示。
1.2编写代码
可以使用html实现[了解]……这里不过多阐述部分代码如下图，详细文档layui官方文档
传送门
可以使用js实现[掌握]
<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>数据表格</title>
<link rel="stylesheet" href="resources/layui/css/layui.css">
</head>
<body><table class="layui-hide" id="userTable" lay-filter="userTable"></table> <script src="resources/layui/layui.js"></script><script type="text/javascript">layui.use(['table','jquery','layer','form'], function(){var table = layui.table;var $=layui.jquery;var form=layui.form;var layer=layui.layer;//渲染数据表格table.render({elem: '#userTable' //渲染的目标对象,url:'resources/json/users.json' //数据接口,title: '用户数据表' //数据导出时的标题,page: true //是否启用分页,cols: [[ //列表数据/* {type: 'checkbox', fixed: 'left'} */,{field:'id', title:'ID', width:80},{field:'username', title:'用户名', width:120},{field:'email', title:'邮箱', width:150, templet: function(res){return ''+ res.email +''}},{field:'sex', title:'性别', width:80, sort: true},{field:'city', title:'城市', width:100},{field:'sign', title:'签名'},{field:'experience', title:'积分', width:80},{field:'ip', title:'IP', width:120},{field:'logins', title:'登入次数', width:100},{field:'joinTime', title:'加入时间', width:120} ]] })
});
</script>
</body>
</html>效果图
因本文重点是带你入门，不是告诉你table有什么参数，故layui官网原来就有的东西不再呈现，均以传送门的形式展示。
下面给出参数的解释。
table 模块所支持的全部参数一览表
传送门
表头参数一览表
传送门
当你看完参数表后，想必是一头雾水，下面带你使用几个重点参数。(提醒：因是在上诉代码中进行修改，所以每次修改后代码，都将会附带一张效果图，根据效果图的变化，你将对参数的作用有更加深入的理解)
参数之toolbar参数
我们在代码中加入,toolbar:"hsy"
效果图
可以看到效果图发生了如图所示的变化,自己品一品，你会对toolbar有一点点认识，下面如果我们想在上方显示的不是hsy文字，而是按钮控件应该怎么使用呢？
提供一种思路：在外面定义好按钮，然后使用toolbar这个参数
来实现一下吧，相信你看到这篇文章layui按钮已经掌握了，如果你真的没掌握，请通过传送门自行学习一下。
在body标签中加入如下代码
<div style="display:none;" id="userToolBar"><button type="button" class="layui-btn layui-btn-sm">增加</button><button type="button" class="layui-btn layui-btn-sm ">编辑</button><button type="button" class="layui-btn layui-btn-sm">删除</button> </div> 然后将代码修改成,toolbar:"#userToolBar"
效果图
toolbar剩下的参数toolbar: true //仅开启工具栏，不显示左侧模板toolbar: 'default' //让工具栏左侧显示默认的内置模板自己去尝试一下吧。
参数之defaultToolbar
我们对代码进行修改,defaultToolbar:['filter', 'print', 'exports']
效果图
我们发现效果图并没有变化，为什么呢，相信你也知道，下面我们对代码再次进行修改,defaultToolbar:['filter', 'print']
效果图
可以看到效果图发生了变化，读到这，你对defaultToolbar想必有了了解，至于更复杂的内容，请读者自行研究吧。
参数之width、height、cellMinWidth自行测试吧
/* ,width:500 *//* ,height:300 */ /* 容器的宽高，自己试一试 *//* ,height:'full-300' *///,cellMinWidth:100 //设置 列的最小的默认宽度参数之done
我们对代码进行修改,done:function(res,curr,count){ alert(res);//后台url返回的json字符串 alert(curr);//当前页 alert(count);//数据总条数 }
方法中有3个参数，看下效果图就懂了。
还是老样子看到效果图自己品一品done属性吧！
参数之totalRow
修改代码,totalRow:true//开启合并行
效果图
可以看到下面多了一行，合并行已经开启，这个属性经常用到，是要掌握的
参数之limit
属性就写到这吧，我写的也好无聊，你看着也累了吧，相信你会自己去官方文档看属性并自己测试了。
看下整体代码和效果图
<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>数据表格</title>
<link rel="stylesheet" href="resources/layui/css/layui.css">
</head>
<body><table class="layui-hide" id="userTable" lay-filter="userTable"></table><div style="display:none;" id="userToolBar"><button type="button" class="layui-btn layui-btn-sm">增加</button><button type="button" class="layui-btn layui-btn-sm ">编辑</button><button type="button" class="layui-btn layui-btn-sm">删除</button> </div> <div id="userBar" style="display:none;"><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></div> <script src="resources/layui/layui.js"></script><script type="text/javascript">layui.use(['table','jquery','layer','form'], function(){var table = layui.table;var $=layui.jquery;var form=layui.form;var layer=layui.layer;//渲染数据表格table.render({elem: '#userTable' //渲染的目标对象,url:'resources/json/users.json' //数据接口,title: '用户数据表' //数据导出时的标题/* ,toolbar:"hsy" */,toolbar:"#userToolBar" //表头工具条,defaultToolbar:['filter', 'print', 'exports']/* ,width:500 *//* ,height:300 */ /* 容器的宽高，自己试一试 *//* ,height:'full-300' *///,cellMinWidth:100 //设置 列的最小的默认宽度,done:function(res,curr,count){/* alert(res);//后台url返回的json字符串alert(curr);//当前页alert(count);//数据总条数 */},totalRow:true//开启合并行/* ,limit:20,limits:[20,40,60] */,text:{none:'暂无相关数据'//默认:无数据},page: true //是否启用分页,cols: [[ //列表数据{type: 'checkbox', fixed: 'left',LAY_CHECKED:'true'} , {type: 'numbers'} ,{field:'id', title:'ID', width:80,sort:true},{field:'username', title:'用户名', width:120,edit:true},{field:'email', title:'邮箱', width:150, templet: function(res){return ''+ res.email +''}},{field:'sex', title:'性别', width:80, sort: true,align:'center',templet:function(d){return d.sex=='男'?'汉子':'妹子';}},{field:'city', title:'城市', width:100},{field:'sign', title:'签名',totalRowText:'合计'},{field:'experience', title:'积分', width:80,totalRow:true},{field:'ip', title:'IP', width:120},{field:'logins', title:'登入次数', width:100,totalRow:true},{field:'joinTime', title:'加入时间', width:120},{fixed: 'right', title:'操作', toolbar: '#userBar', width:150}]] })
});
</script>
</body>
</html>
2.相关事件监听
2.1监听头部工具栏事件
首先我们给头部工具栏的2个按钮加上layui-event(事件 event好理解 ，这个layui-event就可以理解为id，标识符，看看代码对比一下就理解了)，最后的代码为
<div style="display:none;" id="userToolBar"><button type="button" class="layui-btn layui-btn-sm" lay-event="add">增加</button><button type="button" class="layui-btn layui-btn-sm" lay-event="delete">批量删除</button> </div> table.on('toolbar(userTable)',function(obj){switch(obj.event){case 'add':layer.msg('添加');break;case 'delete':layer.msg('删除');break;};})这里只解释一点toolbar(userTable)toolbar中的参数userTable为图片所示处的lay-filter
效果图
2.2监听复选框选择
table.on('checkbox(userTable)', function(obj){console.log(obj.checked); //当前是否选中状态console.log(obj.data); //选中行的相关数据console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one});模拟点击第3行的复选框，看效果
2.3监听单元格编辑
table.on('edit(userTable)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"console.log(obj.value); //得到修改后的值console.log(obj.field); //当前编辑的字段名console.log(obj.data); //所在行的所有相关数据 //发送post请求更新数据/* $.post("url?"+obj.field+"&id="+obj.data.id,function(json){}); */});
强调一点，想要触发编辑事件，必须是可编辑的，即属性edit:true，下文效果图不再发出，估计你也看够效果图了，自己试一试看看吧！
2.4监听行单双击事件
//监听行单击事件table.on('row(userTable)', function(obj){console.log(obj.tr) //得到当前行元素对象console.log(obj.data) //得到当前行数据//obj.del(); //删除当前行//obj.update(fields) //修改当前行数据});//监听行双击事件table.on('rowDouble(userTable)', function(obj){//obj 同上});2.5监听行工具事件
这个是重点，行工具条指的是下图部位
如头部工具栏一样，需要一个“id”lay-event
<div id="userBar" style="display:none;"><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></div> //监听工具条table.on('tool(userTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"var data = obj.data; //获得当前行数据var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值） if(layEvent === 'del'){ //删除layer.msg("删除");layer.confirm('真的删除行么', function(index){obj.del(); //删除对应行（tr）的DOM结构，并更新缓存layer.close(index);//向服务端发送删除指令});} else if(layEvent === 'edit'){ //编辑layer.msg("编辑"); } });2.6监听排序切换
个人感觉这个用不到，不贴代码了。如果需要，可点击链接去查看一下排序切换
3.相关方法
大概有这么多，这里2个举例子测试一下。
3.1获取选中行
我们加2个头部工具
var checkStatus = table.checkStatus('userTable'); //userTable 即为基础参数 id 对应的值 console.log(checkStatus.data) //获取选中行的数据console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件console.log(checkStatus.isAll ) //表格是否全选3.2表格重载
table.reload('userTable', {url: 'resources/json/users.json',where: {} //设定异步数据接口的额外参数//,height: 300});你可能晕了，获取选中行和表格重载加到哪里呢？，怎么使用呢？别着急，给个演示。
table.on('toolbar(userTable)',function(obj){switch(obj.event){case 'add':layer.msg('添加');break;case 'delete':layer.msg('删除');break;case 'get':var checkStatus = table.checkStatus('userTable'); //userTable 即为基础参数 id 对应的值 console.log(checkStatus.data) //获取选中行的数据console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件console.log(checkStatus.isAll ) //表格是否全选break;case 'ss':table.reload('userTable', {url: 'resources/json/users.json',where: {} //设定异步数据接口的额外参数//,height: 300});break;};});看看这代码，熟悉么？哈哈，你明白了吧？不明白就在评论区骂骂我！
需要强调的是表格重载还有一种方法级别的渲染法，这里就不再贴代码了，表格重载
文章末尾，想给大家说的话
相信大家也到看到了，文章中的示例代码均来着layui官方文档，大家自学的时候一定要学会看文档!
layui官网就不需要我贴出来了吧！朋友你入门了么？你要真是不入门，很抱歉，我可不能答应你去吃土！
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！