前言
目前LayUI數據表格既美觀有不乏一些實用功能。基本上表格應有的操作已經具備，LayUI作者【賢心】肯定是煞費苦心去優化，此處致敬。但是實話實話，如果單純那數據表格功能來說，EasUI的數據表格更能更加強大、更加靈活，怎奈於丑的沒法說，當然可以美化，但是成本太高了。我相信在后續的LayUI版本更新中，作者應該會着重優化數據表格，因為作為一個前端框架，美觀度、效率相關、導航相關、數據展現相關無疑是最重要的。
操作說明
現在轉入我們今天要說的數據表格相關操作。目前LayUI數據表格獲取行數據的方式有如下方式（個人理解有限，不全之后望提醒）：
- 表頭加入checkbox列，用戶選擇一行或者多行數據后通過
1 var checkStatus = table.checkStatus('表格唯一ID值'); 2 var data = checkStatus.data;
獲取到相關行數據，其中 data 就是當前選中行的數據對象集合。具體參考： 點擊此處直達
但是，如果說沒有checkbox，沒有行內工具條等設置，就一個常規表格，例如：
目標
- 要做到雙擊某一個單元格觸發獲取整行數據操作
- 能夠根據相關條件進行數據篩選、進行高亮顯示
- 能夠獲取某一個單元格數據
- 能夠動態隱藏指定列（實際作用可能不大，因為隱藏數據的話直接在定義
cols時不定義即可，LayUI的table數據對象還是會指向你服務端返回的數據，即：你服務端返回哪些字段，table數據容器會原封保留，只是你不在cols定義的話不進行展示，但是數據還是有的），但是有時候可能也需要動態隱藏吧，所以保留了該功能
相關實現
-
表格數據 點擊此處直達 然后下載或者復制其內容自行新建文件即可。
-
JS實現
新建JavaScript文件，例如新建一個《DataTableExtend.js》的文件，代碼如下：
1 var LayUIDataTable = (function () { 2 var rowData = {}; 3 var $; 4 5 function checkJquery () { 6 if (!$) { 7 console.log("未獲取jquery對象，請檢查是否在調用ConvertDataTable方法之前調用SetJqueryObj進行設置！") 8 return false; 9 } else return true; 10 } 11 12 /** 13 * 轉換數據表格。 14 * @param callback 雙擊行的回調函數，該回調函數返回三個參數，分別為：當前點擊行的索引值、當前點擊單元格的值、當前行數據 15 * @returns {Array} 返回當前數據表當前頁的所有行數據。數據結構：<br/> 16 * [ 17 * {字段名稱1:{value:"當前字段值",cell:"當前字段所在單元格td對象",row:"當前字段所在行tr對象"}} 18 * ,{字段名稱2:{value:"",cell:"",row:""}} 19 * ] 20 * @constructor 21 */ 22 function ConvertDataTable (callback) { 23 if (!checkJquery()) return; 24 var dataList = []; 25 var rowData = {}; 26 var trArr = $(".layui-table-body.layui-table-main tr");// 行數據 27 if (!trArr || trArr.length == 0) { 28 console.log("未獲取到相關行數據，請檢查數據表格是否渲染完畢！"); 29 return; 30 } 31 $.each(trArr, function (index, trObj) { 32 var currentClickRowIndex; 33 var currentClickCellValue; 34 35 $(trObj).dblclick(function (e) { 36 var returnData = {}; 37 var currentClickRow = $(e.currentTarget); 38 currentClickRowIndex = currentClickRow.data("index"); 39 currentClickCellValue = e.target.innerHTML 40 $.each(dataList[currentClickRowIndex], function (key, obj) { 41 returnData[key] = obj.value; 42 }); 43 callback(currentClickRowIndex, currentClickCellValue, returnData); 44 }); 45 var tdArrObj = $(trObj).find('td'); 46 rowData = {}; 47 // 每行的單元格數據 48 $.each(tdArrObj, function (index_1, tdObj) { 49 var td_field = $(tdObj).data("field"); 50 rowData[td_field] = {}; 51 rowData[td_field]["value"] = $($(tdObj).html()).html(); 52 rowData[td_field]["cell"] = $(tdObj); 53 rowData[td_field]["row"] = $(trObj); 54 55 }) 56 dataList.push(rowData); 57 }) 58 return dataList; 59 } 60 61 return { 62 /** 63 * 設置JQuery對象，第一步操作。如果你沒有在head標簽里面引入jquery且未執行該方法的話，ParseDataTable方法、HideField方法會無法執行，出現找不到 $ 的錯誤。如果你是使用LayUI內置的Jquery，可以 64 * var $ = layui.jquery 然后把 $ 傳入該方法 65 * @param jqueryObj 66 * @constructor 67 */ 68 SetJqueryObj: function (jqueryObj) { 69 $ = jqueryObj; 70 } 71 72 /** 73 * 轉換數據表格 74 */ 75 , ParseDataTable: ConvertDataTable 76 77 /** 78 * 隱藏字段 79 * @param fieldName 要隱藏的字段名（field名稱）參數可為字符串（隱藏單列）或者數組（隱藏多列） 80 * @constructor 81 */ 82 , HideField: function (fieldName) { 83 if (!checkJquery()) return; 84 if (fieldName instanceof Array) { 85 $.each(fieldName, function (index, field) { 86 $("[data-field='" + field + "']").css('display', 'none'); 87 }) 88 } else if (typeof fieldName === 'string') { 89 $("[data-field='" + fieldName + "']").css('display', 'none'); 90 } else { 91 92 } 93 } 94 } 95 })();
- 調用
完整示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <!--<script src="../../js/jquery-3.3.1.js"></script>--> 7 <script src="../../js/layui.js"></script> 8 <script src="DataTableExtend.js"></script> 9 <link rel="stylesheet" href="../../js/css/layui.css" media="all"> 10 11 <script> 12 (function () { 13 layui.use(['table', 'layer'], function () { 14 var table = layui.table; 15 var layer = layui.layer; 16 var $ = layui.jquery; 17 table.render({ 18 id: "tableID"// 設定表格的唯一ID進行標識 19 , elem: '#tableDataLoad'// 綁定table對應的元素 20 , height: 'full-300' 21 , url: 'data2.json' // TODO: 此處寫你實際數據來源 22 , size: 'sm' 23 , page: true 24 , limits: [10, 20, 30, 40, 50] 25 , limit: 30 26 , cols: [[ 27 {field: 'match_name', width: 93, align: 'center', title: '比賽名稱', rowspan: 2} 28 , {align: 'center', title: '比賽信息', colspan: 3} 29 , {field: 'jingcai', width: 200, align: 'center', title: '競猜項', rowspan: 2} 30 , {field: 'num', width: 100, align: 'center', title: '競猜數量', rowspan: 2} 31 ] 32 , [ 33 {field: 'match_time_beijing', width: 200, align: 'center', title: '比賽時間'} 34 , {field: 'match_master', width: 100, align: 'center', title: '主隊'} 35 , {field: 'match_guest', width: 100, align: 'center', title: '客隊'} 36 ]] 37 , done: function (res, curr, count) {// 表格渲染完成之后的回調 38 39 $(".layui-table th").css("font-weight", "bold");// 設定表格標題字體加粗 40 41 LayUIDataTable.SetJqueryObj($);// 第一步：設置jQuery對象 42 43 //LayUIDataTable.HideField('num');// 隱藏列-單列模式 44 //LayUIDataTable.HideField(['num','match_guest']);// 隱藏列-多列模式 45 46 var currentRowDataList = LayUIDataTable.ParseDataTable(function (index, currentData, rowData) { 47 console.log("當前頁數據條數:" + currentRowDataList.length) 48 console.log("當前行索引：" + index); 49 console.log("觸發的當前行單元格：" + currentData); 50 console.log("當前行數據：" + JSON.stringify(rowData)); 51 52 var msg = '<div style="text-align: left"> 【當前頁數據條數】' + currentRowDataList.length + '<br/>【當前行索引】' + index + '<br/>【觸發的當前行單元格】' + currentData + '<br/>【當前行數據】' + JSON.stringify(rowData) + '</div>'; 53 layer.msg(msg) 54 }) 55 56 // 對相關數據進行判斷處理--此處對【競猜數量】大於30的進行高亮顯示 57 $.each(currentRowDataList, function (index, obj) { 58 if (obj['num'] && obj['num'].value > 30) { 59 obj['num'].row.css("background-color", "#FAB000"); 60 } 61 }) 62 }// end done 63 64 65 });//end table.render 66 67 function dealLighthigh (rowIndexArr, bgColor) { 68 $.each(rowIndexArr, function (index, val) { 69 if (typeof val == "number") { 70 $($(".layui-table-body.layui-table-main tr")[val]).css("background-color", bgColor ? bgColor : "yellow"); 71 $($("div .layui-table-fixed.layui-table-fixed-l .layui-table-body tr")[val]).css("background-color", bgColor ? bgColor : "yellow"); 72 } else if (typeof val == 'object') { 73 $($(".layui-table-body.layui-table-main tr")[val.rowIndex]).css("background-color", val.bgColor ? val.bgColor : "yellow"); 74 $($("div .layui-table-fixed.layui-table-fixed-l .layui-table-body tr")[val.rowIndex]).css("background-color", val.bgColor ? val.bgColor : "yellow"); 75 } 76 }) 77 } 78 79 80 });// end layui use 81 })() 82 </script> 83 </head> 84 <body> 85 <table id="tableDataLoad" lay-filter="demo"></table> 86 87 </body> 88 </html>
效果圖展示
圖一：獲取行數據
圖二：對符合條件的行進行高亮顯示
圖三：隱藏列
具體可以參考我發布在GitHub上的原文：點擊此處直達