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對應，這樣展現表格所需的數據就準備好了。

  1 var productList = [], detailList = [], dList = [], submitAllotFlag = true, refusedList = [], returnList = [];
  2 $(function () {
  3     //這個地方就看做普通Ajax請求就能夠，只是封裝了新方法
  4     BaseApiPost("/api/data", //請求接口url
  5         params,//請求參數
  6         function (obj) {//回調函數
  7             if (obj.ErrCode == 0) {
  8                 //取表頭數組
  9                 for (var m = 0; m < obj.Data.ProductList.length; m++) {
 10                     productList.push(obj.Data.ProductList[m].ProductID);
 11                 }
 12                 //數據數組
 13                 dList = obj.Data.DList;
 14                 //渲染表格數據數組
 15                 detailList = obj.Data.DList;
 16                 //將數據數組數據分別與表頭對應放入渲染表格數據數組
 17                 for (var i = 0; i < dList.length; i++) {
 18                     for (var j = 0; j < dList[i].List.length; j++) {
 19                         var ProductIn = productList.indexOf(dList[i].List[j].ProductID);
 20                         if (ProductIn == -1) {
 21                             detailList[i]['qty' + j] = 0;
 22                             detailList[i]['disQty' + j] = 0;
 23                         } else {
 24                             detailList[i]['qty' + ProductIn] = dList[i].List[j].Quantity;
 25                             detailList[i]['DetailId' + ProductIn] = dList[i].List[j].DetailId;
 26                             detailList[i]['disQty' + ProductIn] = dList[i].List[j].DistributionQuantity;
 27                         }
 28                     }
 29                     if (dList[i].CheckState == -1) {
 30                         $("#createOrder").attr("disabled", "disabled");
 31                     }
 32                 }
 33                 //二級表頭，表頭數組2個
 34                 var cols2 = [],
 35                     cols1 = [
 36                     { templet:'<div>{{setCheckBox(d)}}</div>', type: 'checkbox', fixed: 'left', rowspan: 2 } //複選框列
 37                     , { templet: '<div>{{getCheckStatus(d)}}</div>', width: 80, title: '狀態', fixed: 'left', rowspan: 2, unresize: true }
 38                     , { field: 'UnitName', width: 150, title: '用戶名', fixed: 'left', rowspan: 2, unresize: true }];
 39                 for (var n = 0; n < productList.length; n++) {
 40                     //控制表頭顯示字數
 41                     var name = "" + obj.Data.ProductList[n].ChineseName;
 42                     if (name.length > 26) {
 43                         name = name.substring(0, 26) + "...";
 44                     }
 45                     //一級表頭
 46                     cols1.push({ field: '', width:300,maxWidth:300, title: name, colspan: 2, align: "center", unresize: true });
 47                     //二級表頭
 48                     cols2.push({ field: 'qty' + n, width: 150, title: '物料總量', align: "center", unresize: true });
 49                     cols2.push({ templet: '<div>{{getDetail(d,' + n + ')}}</div>', width: 150, title: '分配數量', align: "center", unresize: true });
 50 
 51                 }
 52                 // 使用layui的table組件
 53                 layui.use('table', function () {
 54                     var $ = layui.jquery;
 55                     var table = layui.table;
 56                     table.render({
 57                         elem: '#detailTable'//指定容器
 58                         , cols: [cols1, cols2]//表頭
 59                         , data: detailList//數據
 60                         , done: function (res, page, count) {
 61                             //能夠自行添加判斷的條件是否選中，經過設置關鍵字LAY_CHECKED爲true選中，這裏只對第一行選中
 62                             for (var k = 0; k < res.data.length; k++) {
 63                                 if (res.data[k].CheckState == -1) {
 64                                     //幾種複選框選中設置方法
 65                                     //res.data[k]["LAY_CHECKED"] = 'true';
 66                                     $('tr[data-index=' + k + '] input[type="checkbox"]').attr("disabled", "disabled");
 67                                     $('tr[data-index=' + k + '] input[type="checkbox"]').next().addClass('layui-form-checked');
 68                                     $('tr[data-index=' + k + '] input[type="checkbox"]').attr("disabled", "disabled");
 69                                     //經過改變class與設置style屬性讓複選框選中必須加上此句，點擊後纔是真正選中，後面可用layui table提供的方法獲取選中數據
 70                                     $('tr[data-index=' + k + '] input[type="checkbox"]').click();
 71                                     returnList.push(res.data[k].UnitID);
 72                                 }
 73                             }
 74                         }
 75                     });
 76                     var active = {
 77                         getCheckData: function () {
 78                             refusedList = table.checkStatus("detailTable").data;
 79                             //console.log(refusedList);
 80                         }
 81                     };
 82 
 83                     $('.btn-getData').on('click', function () {
 84                         var type = $(this).data('type');
 85                         active[type] ? active[type].call(this) : '';
 86                     });
 87 
 88                     table.on('checkbox(detailTable)', function (obj) {
 89                         //console.log(obj);
 90                         $("#getData").click();
 91                         var okFlag0 = 0, okFlag1 = 0, okFlag2 = 0;
 92                         for (var x = 0; x < detailList.length; x++) {
 93                             if (detailList[x].CheckState == -1) {
 94                                 okFlag0++;
 95                                 detailList[x]["LAY_CHECKED"] = 'true';
 96                                 $('tr[data-index=' + x + ']').prop('checked', true);
 97                                 $('tr[data-index=' + x + '] input[disabled="disabled"]').next().addClass('layui-form-checked');
 98                                 $('tr[data-index=' + x + '] input[type="checkbox"]').attr("disabled", "disabled");
 99                             }
100                         }
101                         for (var y = 0; y < refusedList.length; y++) {
102                             if (refusedList[y].CheckState != -1) {
103                                 okFlag1++;
104                             }
105                         }
106                         //若是有被選中數據，只能退回選中保存
107                         if (okFlag1 > 0) {
108                             $("#refuseList").removeAttr("disabled", "disabled");
109                             $("#createOrder").attr("disabled", "disabled");
110                         } else if (okFlag0 > 0) {
111                             $("#refuseList").attr("disabled", "disabled");
112                             $("#createOrder").attr("disabled", "disabled");
113                         } else {
114                             $("#refuseList").attr("disabled", "disabled");
115                             $("#createOrder").removeAttr("disabled", "disabled");
116                         }
117 
118                     });
119                 });
120             } else {
121                 alert(obj.Message);
122             }
123 });
124     function getCheckStatus(data) {
125         return (data.CheckState == -1 ? "已退回" : "未審覈" );
126     }
127 
128     function getDetail(o, n) {
129         //o行數據，n行號
130         if (o.WorkID != null && o["DetailId" + n] != undefined ) {
131             var a = "<a class='td-show-detail-a' href='#' data-method='offset' onclick='showDetail(\"" + o["DetailId" + n] + "\")' >" + o["disQty" + n] + "</a>";
132             return a;
133         } else {
134             return  "";
135         }
136     }

JavaScript