[TOC]
## lay-data（table）
```
id - 设定容器唯一ID
<table class="layui-table" lay-data="{id:'idTest'}" lay-filter="test"> …… </table>
page - 是否开启分页
<table class="layui-table" lay-data="{page:true}" lay-filter="test"> …… </table>
limits - 每页数据量可选项
<table class="layui-table" lay-data="{limits:[30,60,90,150,300], limit:60}" lay-filter="test"> …… </table>
loading - 是否显示加载条
<table class="layui-table" lay-data="{loading:false}" lay-filter="test"> …… </table>
width - 设定容器宽度
<table class="layui-table" lay-data="{width:1000}" lay-filter="test"> …… </table>
height - 设定容器高度
<table class="layui-table" lay-data="{height:315}" lay-filter="test"> …… </table>
<table class="layui-table" lay-data="{height:'full-20'}" lay-filter="test"> …… </table>
设定表格外观(行列无边框，隔行背景，表格尺寸)
<table class="layui-table" lay-data="{skin:'line/row/nob', even:true/false, size:'sm/lg'}" lay-filter="test"> …… </table>
```
## lay-data （tr）
```
<table class="layui-table" lay-data="{page:true}" lay-filter="test">
<thead>
<tr>
<th lay-data="{checkbox:true}">checkbox</th>
<th lay-data="{checkbox:true,LAY_CHECKED: true}">checkbox已选</th>
<th lay-data="{field:'id'}">id</th>
<th lay-data="{width:180}">width</th>
<th lay-data="{space:true}">space</th>
<th lay-data="{sort:true}">sort</th>
<th lay-data="{fixed:'right|center|left'}">fixed</th>
<th lay-data="{edit:'text'}">edit</th>
<th lay-data="{templet: '#titleTpl'}">templet</th>
<th lay-data="{toolbar: '#barDemo'}">toolbar</th>
<th lay-data="{initSort:{field:'id', type:'desc'}}">initSort</th>
</tr>
</thead>
</table>
```
## 获取选中行
```
<table class="layui-table" lay-data="{id: 'idTest'}"> …… </table>
var checkStatus = table.checkStatus('idTest'); //test即为基础参数id对应的值
console.log(checkStatus.data) //获取选中行的数据
console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
console.log(checkStatus.isAll ) //表格是否全选
```
## 事件监听
```
<table class="layui-table" lay-filter="test"></table>
table.on();
```
## 监听复选框选择
```
table.on('checkbox(test)', function(obj){
console.log(obj.checked); //当前是否选中状态
console.log(obj.data); //选中行的相关数据
console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
});
```
## 监听单元格编辑
```
table.on('edit(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
console.log(obj.value); //得到修改后的值
console.log(obj.field); //当前编辑的字段名
console.log(obj.data); //所在行的所有相关数据
data[field] = value; //更新缓存中的值
});
```
## toolbar - 绑定工具条
```
<th lay-data="{toolbar: '#barDemo'}"></th>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-mini" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
<!-- 这里同样支持 laytpl 语法，如： -->
{{# if(d.auth > 2){ }}
<a class="layui-btn layui-btn-mini" lay-event="check">审核</a>
{{# } }}
</script>
注意：属性 lay-event="" 是模板的关键所在，值可随意定义。
```
## 工具条DEMO
```
//监听工具条
table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值
var tr = obj.tr; //获得当前行 tr 的DOM对象
if(layEvent === 'detail'){ //查看
//do somehing
} else if(layEvent === 'del'){ //删除
layer.confirm('真的删除行么', function(index){
obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
layer.close(index);
//向服务端发送删除指令
});
} else if(layEvent === 'edit'){ //编辑
//do something
//同步更新缓存对应的值
obj.update({
username: '123'
,title: 'xxx'
});
}
});
```
## 返回数据格式
```
{
code: 0,
msg: "",
count: 1000,
data: []
}
```
## 获取选中行
```
<table class="layui-table" lay-data="{id: 'idTest'}"> …… </table>
var checkStatus = table.checkStatus('idTest'); //test即为基础参数id对应的值
console.log(checkStatus.data) //获取选中行的数据
console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
console.log(checkStatus.isAll ) //表格是否全选
```
## 事件监听
```
<table class="layui-table" lay-filter="test"></table>
```
### 监听复选框选择
```
table.on('checkbox(test)', function(obj){
console.log(obj.checked); //当前是否选中状态
console.log(obj.data); //选中行的相关数据
console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
});
```
### 监听单元格编辑
```
table.on('edit(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
console.log(obj.value); //得到修改后的值
console.log(obj.field); //当前编辑的字段名
console.log(obj.data); //所在行的所有相关数据
data[field] = value; //更新缓存中的值
});
```
### 监听工具条
```
//监听工具条
table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值
var tr = obj.tr; //获得当前行 tr 的DOM对象
if(layEvent === 'detail'){ //查看
//do somehing
} else if(layEvent === 'del'){ //删除
layer.confirm('真的删除行么', function(index){
obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
layer.close(index);
//向服务端发送删除指令
});
} else if(layEvent === 'edit'){ //编辑
//do something
//同步更新缓存对应的值
obj.update({
username: '123'
,title: 'xxx'
});
}
});
```
### 监听排序切换
```
table.on('sort(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
console.log(obj.field); //当前排序的字段名
console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
console.log(this); //当前排序的 th 对象
//尽管我们的 table 自带排序功能，但并没有请求服务端。
//有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，如：
table.reload('idTest', {
initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。 layui 2.1.1 新增参数
,where: { //请求参数
field: obj.field //排序字段
,order: obj.type //排序方式
}
});
});
```
## 表格重载
这个我不太清楚，待使用后再来看！
```
【HTML】
<table class="layui-table" lay-data="{id: 'idTest'}"> …… </table>
【JS】
table.reload('idTest', {
url: '/api/table/search'
,where: {} //设定异步数据接口的额外参数
//,height: 300
});
```
- select
- select自定义值
- fsLayuiPluginSelect
- 修改源码并重新编译的操作流程
- Fly Template
- LayUI版本
- LayIM
- 《layui从鱼到渔》系列教程
- 提示框的颜色
- lay-verType异常提示层
- 提示
- Layui-JS
- 日期
- 1数据表格-张伟
- 2弹出层
- 3更改状态
- 4删除操作
- 5点击列表显示图片
- 6.搜索功能
- 7.批量删除
- 8.排序功能
- 9.表单提交
- 10.单图上传
- 11.表单中城市区联动
- 12单图上传
- 13.其他备注
- 点击弹出及保存自动关闭最简实例
- 参数
- jqajax的应用
- js-del,js-action弹出操作
- 编辑删除
- LayUI
- layui-tab 标签页
- layui-table 静态表格
- layui-btn 按钮
- layui.data
- layui-数据表格
- 监听
- 必填
- 底层方法
- layui-表单监听
- lay-tpl
- 加载中
- layui-form表单
- layui内置模块（element常用元素操作）
- layui-tab变为竖形形式
- LayUI-cdn及初始模板
- laytpl-checkbox不显示样式
- 点击加载active样式
- layui官方干货
- onclick的坑
- layer.js怎么传参
- laytpl判断
- 如何在一个div区域块内显示加载效果
- LayUI扩展
- 基于Layui做出来的Target标签选中功能
- layui拓展之“下拉多选功能”
- layUI 扩展模块之树形下拉选择框 selecttree
- 自己做的 layui 星星评分插件
- 精品
- 给 layui 扩展一个 steps 步骤组件
- 知识采集
- checkbox
- laypage+laytpl
- laypage
- laypage-jquery
- lay-verify扩展
- LayUI封装
- 问题
- 为什么layer中弹出层内容点击事件不起作用