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

前言

    目前LayUI数据表格既美观有不乏一些实用功能。基本上表格应有的操作已经具备，LayUI作者【贤心】肯定是煞费苦心去优化，此处致敬。但是实话实话，如果单纯那数据表格功能来说，EasUI的数据表格更能更加强大、更加灵活，怎奈于丑的没法说，当然可以美化，但是成本太高了。我相信在后续的LayUI版本更新中，作者应该会着重优化数据表格，因为作为一个前端框架，美观度、效率相关、导航相关、数据展现相关无疑是最重要的。

 

操作说明

    现在转入我们今天要说的数据表格相关操作。目前LayUI数据表格获取行数据的方式有如下方式（个人理解有限，不全之后望提醒）：

1. 表头加入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             });