layui table简介
layui是一套控件集 官网 基本上常用的组件都包含了。优点是封装了整套常用的ui。不足的地方是api不是很清晰，一些原来在类似easyui这种纯jquery控件集中有的方法事件这套控件集可能没有。
table组件是一般企业开发中最常用到的组件，layui的table组件满足了绝大部分需求API，部分定制功能可能需要修改源码，或者用比较生硬的方法去修改。希望后续版本能更全面一些
普通页面增删改查
<table id="table" lay-filter="tableFilter"></table>
<script type="text/html" id="toolCol">
<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>
var gridParam = {
elem: "#table"
, id: "table"
, height: 'full-53'
, method: "post"
, size:"sm"//有lg和sm，lg对于笔记本来说太大了。
, limit: 20
, limits: [20, 50, 100]
, page: true //开启分页
, response: {
countName: 'totalElements' //数据总数的字段名称，默认：count
, dataName: 'content' //数据列表的字段名称，默认：data
, statusName: null
, statusCode: null
}
, url: 'xxxx/xx/xx'
, cols: [[
{fixed: 'left', type: 'checkbox'}
, {fixed: 'left', title: '序号', type: 'numbers'}
, {field: 'username', title: '用户名', minWidth: 100}
...
, {fixed: 'right', title: '操作', minWidth: 150, align: 'center', toolbar: '#toolCol'}
]]
};
//表格初始化
layui.use('table', function () {
table.render(gridParam);
table.on('tool(tableFilter)', function (obj) {
if(obj.event=="edit"){
xxx
}else if(obj.event=="del"){
xxx
}
});
});
//重新查询
$("search").click(function(){
layui.table.reload("table", {
where: $("searchForm").serializeJSON()
});
});注意事项：由于获取列内容是通过[]的方式从查询结果中获取，所以不能直接取多层结构下的数据例如aa.bb.cc只能通过
templet:"<div>{{d.exteriorOperation.projectNo}}</div>" 的方式取值。
可编辑表格
由于table组件不支持复杂的输入操作，仅支持文本框，所以我们只有通过templet包裹控件的模式进行表格的编辑操作
例如：
<script type="text/html" id="valuationTypeCol">
<!--lay-ignore:默认表格中的select会渲染为layui的样式，加了此属性后不会自动渲染 -->
<select name="aa[]bb" class="form-control input-sm laytable-input" lay-ignore ">
<option value="0">0</option>
<option value="1">0</option>
</select>
</script>
, {fixed: 'right',field: 'valuationType', title: '计价方式', minWidth: 80,templet:'#valuationTypeCol'}注意事项：
- 对于有左侧固定，右侧固定的表格layui使用的模式是生成3个table互相遮盖，所以页面取值时会存在重复数据，只能依据class来获取layui-table-fixed-r 这个class下的表单内容就不会重复
- 相同的原因所以更改行高要改三个地方，左中右三个field中都需要指定style:"height:65px;"来修改行高
行背景色修改
修改checkbox选中行的背景色
var checkStyle={
"color": "#a94442"
,"background-color": "#f2dede"
};
var defaultStyle = {
"background-color": "#fff"
,"color": "#666"
}
//layui-form-checked 为选中checkbox样式（div模拟的），由于表格可能存在左侧固定，非固定列，右侧固定列三个模块，所以使用此方法增加背景色
table.on('checkbox(inquiryParity)', function(obj){
//obj.data.LAY_TABLE_INDEX是行序号
$("tr[data-index="+obj.data.LAY_TABLE_INDEX+"]").css(obj.checked?checkStyle:defaultStyle );
});