layui.use('table',function(){vartable=layui.table;// 第一个实例table.render({elem:'#demo',url:'user.json'// 数据接口,cols:[[// 表头{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}]]});});
数据接口 user.json
{"code":0,"msg":"","count":50,"data":[{"id":10000,"username":"user-0","sex":"女","city":"城市-0","sign":"签名-0"},{"id":10001,"username":"user-1","sex":"男","city":"城市-1","sign":"签名-1"},{"id":10002,"username":"user-2","sex":"女","city":"城市-2","sign":"签名-2"},{"id":10003,"username":"user-3","sex":"女","city":"城市-3","sign":"签名-3"},{"id":10004,"username":"user-4","sex":"男","city":"城市-4","sign":"签名-4"}]}
三种初始化渲染方式
机制适用场景
方法渲染用JS方法的配置完成渲染（推荐）无需写过多的 HTML，在 JS 中指定原始元素，再设定各项参数即可。
自动渲染HTML配置，自动渲染无需写过多 JS，可专注于 HTML 表头部分
转换静态表格转化一段已有的表格元素无需配置数据接口，在JS中指定表格元素，并简单地给表头加上自定义属性即可
方法渲染
将基础参数的设定放在了JS代码中，且原始的 table 标签只需要一个选择器
渲染表格
layui.use('table',function(){vartable=layui.table;// 执行渲染table.render({elem:'#demo'// 指定原始表格元素选择器（推荐id选择器）,url:'user.json'// 数据接口,height:315// 容器高度,page:true// 开启分页,cols:[[// 设置表头{field:'id',title:'ID'},{field:'username',title:'用户名'},{field:'sex',title:'性别'}]]});});
注：*table.render()*方法返回一个对象：var tableIns = table.render(options)，可用于对当前表格进行“重载”等操作。
自动渲染
在一段 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染，而无需你写初始的渲染方法。
1) 带有 class=“layui-table” 的
标签。
2) 对标签设置属性 lay-data="" 用于配置一些基础参数
3) 在
标签中设置属性*lay-data=""*用于配置表头信息
ID用户名性别
转换静态表格
页面已经存在了一段有内容的表格，由原始的table标签组成，只需要赋予它一些动态元素。
昵称积分签名
| 贤心1 | 66 | 人生就像是一场修行a |
执行用于转换表格的JS方法
layui.use('table',function(){vartable=layui.table;// 转换静态表格table.init('demo',{height:315// 设置高度// 支持所有基础参数});});
基础参数使用的场景
// 场景一：下述方法中的键值即为基础参数项table.render({ height: 300 ,url: 'user.json'}); // 场景二：下述 lay-data 里面的内容即为基础参数项，切记：值要用单引号……// 更多场景：下述 options 即为含有基础参数项的对象> table.init('filter', options); // 转化静态表格> var tableObj = table.render({}); tableObj.reload(options); // 重载表格
开启分页
// JS实现代码 layui.use('table',function(){vartable=layui.table;// 执行渲染table.render({elem:'#demo'// 指定原始表格元素选择器（推荐id选择器）,url:'user.json'// 数据接口,height:315// 容器高度,page:true// 开启分页,cols:[[// 设置表头{field:'id',title:'ID'},{field:'username',title:'用户名'},{field:'sex',title:'性别'}]]});});
开启头部工具栏
获取选中行数据获取选中数目验证是否全选编辑删除
layui.use('table',function(){vartable=layui.table;// 执行渲染table.render({elem:'#demo'// 指定原始表格元素选择器（推荐id选择器）,url:'user.json'// 数据接口,height:315// 容器高度,page:true// 开启分页,cols:[[// 设置表头{field:'id',title:'ID'},{field:'username',title:'用户名'},{field:'sex',title:'性别'},{title:'操作',toolbar:'#barDemo'}// 绑定表头工具栏]],toolbar:'#toolbarDemo'// 开启头部工具栏，并为其绑定左侧模板});/**
* 头工具栏事件
* 语法：
table.on('toolbar(demo)', function(obj){
});
注：demo表示选择器元素上设置的lay-filter属性值
*/table.on('toolbar(demo)',function(obj){// obj.config.id 当前选择器的id属性值，即demo// 获取当前表格被选中的记录对象，返回数组varcheckStatus=table.checkStatus(obj.config.id);// obj.event 得到当前点击元素的事件名switch(obj.event){case'getCheckData':// 获取被选中的记录的数组vardata=checkStatus.data;// 将数组数据解析成字符串layer.alert(JSON.stringify(data));break;case'getCheckLength':vardata=checkStatus.data;layer.msg('选中了：'+data.length+' 个');break;case'isAll':// checkStatus.isAll 判断记录是否被全选layer.msg(checkStatus.isAll?'全选':'未全选');break;// 自定义头工具栏右侧图标 - 提示case'LAYTABLE_TIPS':layer.alert('这是工具栏右侧自定义的一个图标按钮');break;};});/**
* 监听行工具事件
*/table.on('tool(demo)',function(obj){// 得到当前操作的tr的相关信息vardata=obj.data;if(obj.event==='del'){// 确认框layer.confirm('真的删除行么',function(index){// 删除指定trobj.del();// index 当前弹出层的下标，通过下标关闭弹出层layer.close(index);});}elseif(obj.event==='edit'){// 输入框layer.prompt({// 表单元素的类型 0=文本框 1=密码框 2=文本域 formType:0,value:data.username},function(value,index){// 修改指定单元格的值// value表示输入的值obj.update({username:value});// 关闭弹出层layer.close(index);});}});});
开启单元格编辑
IDID用户名性别城市积分
layui.use('table',function(){vartable=layui.table;// 监听单元格编辑table.on('edit(demo)',function(obj){varvalue=obj.value// 得到修改后的值,data=obj.data// 得到所在行所有键值,field=obj.field;// 得到字段layer.msg('[ID: '+data.id+'] '+field+' 字段更改为：'+value);});});
数据表格的重载
搜索ID：搜索
layui.use('table',function(){vartable=layui.table;var$=layui.jquery;// 获取jquery对象// 执行渲染table.render({elem:'#demo'// 指定原始表格元素选择器（推荐id选择器）,url:'user.json'// 数据接口,page:true// 开启分页,cols:[[// 设置表头{type:'checkbox',fixed:'left'}// 设置复选框,{field:'id',title:'ID'},{field:'username',title:'用户名'},{field:'sex',title:'性别'}]]});// 给指定元素绑定事件$(document).on('click','#searchBtn',function(data){// 获取搜索框对象vardemoReload=$('#demoReload');table.reload('demo',{where:{// 设定异步数据接口的额外参数，任意设id:demoReload.val()},page:{// 让条件查询从第一页开始查询，不写则从当前页开始查询，此页之前的数据将不纳入条件筛选curr:1// 重新从第 1 页开始}});// 只重载数据});});
sort: true, edit: ‘text’}">积分
```
layui.use('table',function(){vartable=layui.table;// 监听单元格编辑table.on('edit(demo)',function(obj){varvalue=obj.value// 得到修改后的值,data=obj.data// 得到所在行所有键值,field=obj.field;// 得到字段layer.msg('[ID: '+data.id+'] '+field+' 字段更改为：'+value);});});
数据表格的重载
搜索ID：搜索
layui.use('table',function(){vartable=layui.table;var$=layui.jquery;// 获取jquery对象// 执行渲染table.render({elem:'#demo'// 指定原始表格元素选择器（推荐id选择器）,url:'user.json'// 数据接口,page:true// 开启分页,cols:[[// 设置表头{type:'checkbox',fixed:'left'}// 设置复选框,{field:'id',title:'ID'},{field:'username',title:'用户名'},{field:'sex',title:'性别'}]]});// 给指定元素绑定事件$(document).on('click','#searchBtn',function(data){// 获取搜索框对象vardemoReload=$('#demoReload');table.reload('demo',{where:{// 设定异步数据接口的额外参数，任意设id:demoReload.val()},page:{// 让条件查询从第一页开始查询，不写则从当前页开始查询，此页之前的数据将不纳入条件筛选curr:1// 重新从第 1 页开始}});// 只重载数据});});
