LayUI-Table表格渲染

记项目中又一表格使用方法，项目首选是使用BootstrapTable的，但是经过多番查证与调试，始终没有把固定列的功能调试成功，找到的成功的例子原样照搬都不行，文件引入也都没有问题，实在搞不懂了，如果有哪位大神知道BootstrapTable列固定如何实现，望不吝赐教。

言归正传，依据项目表格展示需求，剥去业务，需要一个具有每行具有复选框，多级表头，表头信息动态获取，列固定，点击单元格数据可查看详情的这样一个表格，所以因为没能搞定BootstrapTable渲染表格列固定问题没有搞定（满足其他需求没问题），这个表格就交给layui table来展示了，下面贴上是怎么用的。

先来渲染效果

首先，引入jQuery及本地layui的样式文件与js文件，这是渲染基础（jQuery是后续数据处理需要引入）。因为需要的表格表头数据项也是请求数据获取到后才能渲染显示，所以此次表格全部使用js方法方式初始化，对应的页面的表格容器就简单的多了，一行代码即可。

<table class="layui-table" id="detailTable" lay-filter="detailTable" style="height:100%;width:100%;" lay-size="sm"></table>

<button type="button" class="btn btn-getData hidden" data-type="getCheckData" id="getData">提交保存</button>
<input type="button" class="btn btn-primary" onclick="save(true)" id="createOrder" value="生成分配单" />
<input type="button" class="btn btn-primary" onclick="save(false)" id="refuseList" value="退回已选单据" disabled="disabled" />

HTML

然后就要对空的表格容器填内容，所有要显示的数据是一个接口返回的，所以返回的数据形式可能会比较乱，重要是理清楚然后对应项放在对应位置，其中表头和数据是分了两个LIST返回的，但是数据和表头又有对应关系，所以在渲染表格前，先把数据逻辑理顺，贴上请求返回的数据结构，才能理解后面对数组的处理。

其中表头List返回表格要显示的表头项，数据详情List返回的数据和表头通过ProductID对应，这样展示表格所需的数据就准备好了。

 var productList = [], detailList = [], dList = [], submitAllotFlag = true, refusedList = [], returnList = [];
 $(function () {
     //这个地方就看作普通Ajax请求就可以，只是封装了新方法
     BaseApiPost("/api/data", //请求接口url
         params,//请求参数
         function (obj) {//回调函数
             if (obj.ErrCode == 0) {
                 //取表头数组
                 for (var m = 0; m < obj.Data.ProductList.length; m++) {
                     productList.push(obj.Data.ProductList[m].ProductID);
                 }
                 //数据数组
                 dList = obj.Data.DList;
                 //渲染表格数据数组
                 detailList = obj.Data.DList;
                 //将数据数组数据分别与表头对应放入渲染表格数据数组
                 for (var i = 0; i < dList.length; i++) {
                     for (var j = 0; j < dList[i].List.length; j++) {
                         var ProductIn = productList.indexOf(dList[i].List[j].ProductID);
                         if (ProductIn == -1) {
                             detailList[i]['qty' + j] = 0;
                             detailList[i]['disQty' + j] = 0;
                         } else {
                             detailList[i]['qty' + ProductIn] = dList[i].List[j].Quantity;
                             detailList[i]['DetailId' + ProductIn] = dList[i].List[j].DetailId;
                             detailList[i]['disQty' + ProductIn] = dList[i].List[j].DistributionQuantity;
                         }
                     }
                     if (dList[i].CheckState == -1) {
                         $("#createOrder").attr("disabled", "disabled");
                     }
                 }
                 //二级表头，表头数组2个
                 var cols2 = [],
                     cols1 = [
                     { templet:'<div>{{setCheckBox(d)}}</div>', type: 'checkbox', fixed: 'left', rowspan: 2 } //复选框列
                     , { templet: '<div>{{getCheckStatus(d)}}</div>', width: 80, title: '状态', fixed: 'left', rowspan: 2, unresize: true }
                     , { field: 'UnitName', width: 150, title: '用户名', fixed: 'left', rowspan: 2, unresize: true }];
                 for (var n = 0; n < productList.length; n++) {
                     //控制表头显示字数
                     var name = "" + obj.Data.ProductList[n].ChineseName;
                     if (name.length > 26) {
                         name = name.substring(0, 26) + "...";
                     }
                     //一级表头
                     cols1.push({ field: '', width:300,maxWidth:300, title: name, colspan: 2, align: "center", unresize: true });
                     //二级表头
                     cols2.push({ field: 'qty' + n, width: 150, title: '物料总量', align: "center", unresize: true });
                     cols2.push({ templet: '<div>{{getDetail(d,' + n + ')}}</div>', width: 150, title: '分配数量', align: "center", unresize: true });

                 }
                 // 使用layui的table组件
                 layui.use('table', function () {
                     var $ = layui.jquery;
                     var table = layui.table;
                     table.render({
                         elem: '#detailTable'//指定容器
                         , cols: [cols1, cols2]//表头
                         , data: detailList//数据
                         , done: function (res, page, count) {
                             //可以自行添加判断的条件是否选中，通过设置关键字LAY_CHECKED为true选中，这里只对第一行选中
                             for (var k = 0; k < res.data.length; k++) {
                                 if (res.data[k].CheckState == -1) {
                                     //几种复选框选中设置方法
                                     //res.data[k]["LAY_CHECKED"] = 'true';
                                     $('tr[data-index=' + k + '] input[type="checkbox"]').attr("disabled", "disabled");
                                     $('tr[data-index=' + k + '] input[type="checkbox"]').next().addClass('layui-form-checked');
                                     $('tr[data-index=' + k + '] input[type="checkbox"]').attr("disabled", "disabled");
                                     //通过改变class与设置style属性让复选框选中必须加上此句，点击后才是真正选中，后面可用layui table提供的方法获取选中数据
                                     $('tr[data-index=' + k + '] input[type="checkbox"]').click();
                                     returnList.push(res.data[k].UnitID);
                                 }
                             }
                         }
                     });
                     var active = {
                         getCheckData: function () {
                             refusedList = table.checkStatus("detailTable").data;
                             //console.log(refusedList);
                         }
                     };

                     $('.btn-getData').on('click', function () {
                         var type = $(this).data('type');
                         active[type] ? active[type].call(this) : '';
                     });

                     table.on('checkbox(detailTable)', function (obj) {
                         //console.log(obj);
                         $("#getData").click();
                         var okFlag0 = 0, okFlag1 = 0, okFlag2 = 0;
                         for (var x = 0; x < detailList.length; x++) {
                             if (detailList[x].CheckState == -1) {
                                 okFlag0++;
                                 detailList[x]["LAY_CHECKED"] = 'true';
                                 $('tr[data-index=' + x + ']').prop('checked', true);
                                 $('tr[data-index=' + x + '] input[disabled="disabled"]').next().addClass('layui-form-checked');
                                 $('tr[data-index=' + x + '] input[type="checkbox"]').attr("disabled", "disabled");
                             }
                         }
                         for (var y = 0; y < refusedList.length; y++) {
                             if (refusedList[y].CheckState != -1) {
                                 okFlag1++;
                             }
                         }
                         //如果有被选中数据，只能退回选中保存
                         if (okFlag1 > 0) {
                             $("#refuseList").removeAttr("disabled", "disabled");
                             $("#createOrder").attr("disabled", "disabled");
                         } else if (okFlag0 > 0) {
                             $("#refuseList").attr("disabled", "disabled");
                             $("#createOrder").attr("disabled", "disabled");
                         } else {
                             $("#refuseList").attr("disabled", "disabled");
                             $("#createOrder").removeAttr("disabled", "disabled");
                         }

                     });
                 });
             } else {
                 alert(obj.Message);
             }
 });
     function getCheckStatus(data) {
         return (data.CheckState == -1 ? "已退回" : "未审核" );
     }

     function getDetail(o, n) {
         //o行数据，n行号
         if (o.WorkID != null && o["DetailId" + n] != undefined ) {
             var a = "<a class='td-show-detail-a' href='#' data-method='offset' onclick='showDetail(\"" + o["DetailId" + n] + "\")' >" + o["disQty" + n] + "</a>";
             return a;
         } else {
             return  "";
         }
     }

JavaScript