LayUI之table数据表格获取行、行高亮等相关操作

前言

目前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》的文件，代码如下：

var LayUIDataTable = (function () {
   var rowData = {};
   var $;

   function checkJquery () {
       if (!$) {
           console.log("未获取jquery对象，请检查是否在调用ConvertDataTable方法之前调用SetJqueryObj进行设置！")
           return false;
       } else return true;
   }

   /**
    * 转换数据表格。
    * @param callback 双击行的回调函数，该回调函数返回三个参数，分别为：当前点击行的索引值、当前点击单元格的值、当前行数据
    * @returns {Array} 返回当前数据表当前页的所有行数据。数据结构：<br/>
    * [
    *      {字段名称1:{value:"当前字段值",cell:"当前字段所在单元格td对象",row:"当前字段所在行tr对象"}}
    *     ,{字段名称2:{value:"",cell:"",row:""}}
    * ]
    * @constructor
    */
   function ConvertDataTable (callback) {
       if (!checkJquery()) return;
       var dataList = [];
       var rowData = {};
       var trArr = $(".layui-table-body.layui-table-main tr");// 行数据
       if (!trArr || trArr.length == 0) {
           console.log("未获取到相关行数据，请检查数据表格是否渲染完毕！");
           return;
       }
       $.each(trArr, function (index, trObj) {
           var currentClickRowIndex;
           var currentClickCellValue;

           $(trObj).dblclick(function (e) {
               var returnData = {};
               var currentClickRow = $(e.currentTarget);
               currentClickRowIndex = currentClickRow.data("index");
               currentClickCellValue = e.target.innerHTML
               $.each(dataList[currentClickRowIndex], function (key, obj) {
                   returnData[key] = obj.value;
               });
               callback(currentClickRowIndex, currentClickCellValue, returnData);
           });
           var tdArrObj = $(trObj).find('td');
           rowData = {};
           //  每行的单元格数据
           $.each(tdArrObj, function (index_1, tdObj) {
               var td_field = $(tdObj).data("field");
               rowData[td_field] = {};
               rowData[td_field]["value"] = $($(tdObj).html()).html();
               rowData[td_field]["cell"] = $(tdObj);
               rowData[td_field]["row"] = $(trObj);

           })
           dataList.push(rowData);
       })
       return dataList;
   }

   return {
       /**
        * 设置JQuery对象，第一步操作。如果你没有在head标签里面引入jquery且未执行该方法的话，ParseDataTable方法、HideField方法会无法执行，出现找不到 $ 的错误。如果你是使用LayUI内置的Jquery，可以
        * var $ = layui.jquery   然后把 $ 传入该方法
        * @param jqueryObj
        * @constructor
        */
       SetJqueryObj: function (jqueryObj) {
           $ = jqueryObj;
       }

       /**
        * 转换数据表格
        */
       , ParseDataTable: ConvertDataTable

       /**
        * 隐藏字段
        * @param fieldName 要隐藏的字段名（field名称）参数可为字符串（隐藏单列）或者数组（隐藏多列）
        * @constructor
        */
       , HideField: function (fieldName) {
           if (!checkJquery()) return;
           if (fieldName instanceof Array) {
               $.each(fieldName, function (index, field) {
                   $("[data-field='" + field + "']").css('display', 'none');
               })
           } else if (typeof fieldName === 'string') {
               $("[data-field='" + fieldName + "']").css('display', 'none');
           } else {

           }
       }
   }
})();

调用

完整示例：

 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',  93, align: 'center', title: '比赛名称', rowspan: 2}
28                         , {align: 'center', title: '比赛信息', colspan: 3}
29                         , {field: 'jingcai',  200, align: 'center', title: '竞猜项', rowspan: 2}
30                         , {field: 'num',  100, align: 'center', title: '竞猜数量', rowspan: 2}
31                     ]
32                         , [
33                             {field: 'match_time_beijing',  200, align: 'center', title: '比赛时间'}
34                             , {field: 'match_master',  100, align: 'center', title: '主队'}
35                             , {field: 'match_guest',  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>

LayUI之table数据表格获取行、行高亮等相关操作

前言

操作说明

目标

相关实现

效果图展示

图一：获取行数据

图二：对符合条件的行进行高亮显示

图三：隐藏列