前言:按照这篇文章步骤一点一点来，你不入门我入土。
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 '<em>'+ res.email +'</em>'
}}
,{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:"<div>hsy</div>"
效果图
可以看到效果图发生了如图所示的变化,自己品一品，你会对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:"<div>hsy</div>" */
,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 '<em>'+ res.email +'</em>'
}}
,{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个头部工具
<button type="button" class="layui-btn layui-btn-sm" lay-event="get">获取选中行</button> <button type="button" class="layui-btn layui-btn-sm" lay-event="ss">表格重载</button>
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官网就不需要我贴出来了吧！朋友你入门了么？你要真是不入门，很抱歉，我可不能答应你去吃土！
