layui-table组件在企业开发中的使用记录-优快云博客

本文介绍了layui table组件，它是一套封装常用UI的控件集，但API不够清晰。table组件满足企业开发多数需求，部分定制需改源码。还阐述了普通页面增删改查、可编辑表格、行背景色修改的使用方法及注意事项，如取值方式、页面取值重复等问题。

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 );
 });

来自为知笔记(Wiz)