LayUI之table数据表格获取⾏、⾏⾼亮等相关操作
前⾔
⽬前LayUI数据表格既美观有不乏⼀些实⽤功能。基本上表格应有的操作已经具备，LayUI作者【贤⼼】肯定是煞费苦⼼去优化，此处致敬。但是实话实话，如果单纯那数据表格功能来说，EasUI的数据表格更能更加强⼤、更加灵活，怎奈于丑的没法说，当然可以美化，但是成本太⾼了。我相信在后续的LayUI版本更新中，作者应该会着重优化数据表格，因为作为⼀个前端框架，美观度、效率相关、导航相关、数据展现相关⽆疑是最重要的。
操作说明
现在转⼊我们今天要说的数据表格相关操作。⽬前LayUI数据表格获取⾏数据的⽅式有如下⽅式（个⼈理解有限，不全之后望提醒）：
1. 表头加⼊checkbox列，⽤户选择⼀⾏或者多⾏数据后通过
1var checkStatus = table.checkStatus('表格唯⼀ID值');
2var data = checkStatus.data;
获取到相关⾏数据，其中data就是当前选中⾏的数据对象集合。具体参考：
但是，如果说没有checkbox，没有⾏内⼯具条等设置，就⼀个常规表格，例如：
⽬标
要做到双击某⼀个单元格触发获取整⾏数据操作
能够根据相关条件进⾏数据筛选、进⾏⾼亮显⽰
能够获取某⼀个单元格数据
能够动态隐藏指定列（实际作⽤可能不⼤，因为隐藏数据的话直接在定义cols时不定义即可，LayUI的table数据对象还是会指向你服务端返回的数据，即：你服务端返回哪些字段，table数据容器会原封保留，只是你不在cols定义的话不进⾏展⽰，但是数据还是有的），但是有时候可能也需要动态隐藏吧，所以保留了该功能
相关实现
表格数据然后下载或者复制其内容⾃⾏新建⽂件即可。
JS实现
新建JavaScript⽂件，例如新建⼀个《DataTableExtend.js》的⽂件，代码如下：
1var LayUIDataTable = (function () {
2var rowData = {};
3var $;
4
5function checkJquery () {
6if (!$) {
7            console.log("未获取jquery对象，请检查是否在调⽤ConvertDataTable⽅法之前调⽤SetJqueryObj进⾏设置！")
8return 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*/
22function ConvertDataTable (callback) {
23if (!checkJquery()) return;
24var dataList = [];
25var rowData = {};
26var trArr = $(".layui-table-body.layui-table-main tr");// ⾏数据
27if (!trArr || trArr.length == 0) {
28            console.log("未获取到相关⾏数据，请检查数据表格是否渲染完毕！");
29return;
30        }
31        $.each(trArr, function (index, trObj) {
32var currentClickRowIndex;
33var currentClickCellValue;
34
35            $(trObj).dblclick(function (e) {
36var returnData = {};
37var 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            });
45var tdArrObj = $(trObj).find('td');
46            rowData = {};
47//  每⾏的单元格数据
48            $.each(tdArrObj, function (index_1, tdObj) {
49var 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        })
58return dataList;
59    }
60
61return {
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) {
83if (!checkJquery()) return;
84if (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 })();
调⽤
layui下载完整⽰例：
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 () {
14var table = layui.table;
15var layer = layui.layer;
16var $ = layui.jquery;
17                der({
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
46var 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
52var msg = '<div > 【当前页数据条数】' + currentRowDataList.length + '<br/>【当前⾏索引】' + index + '<br/>【触发的当前⾏单元格】' + currentData + '<br/>【当前⾏数据】' + JSON.stringify(rowData)
53                            layer.msg(msg)
54                        })
55
56// 对相关数据进⾏判断处理--此处对【竞猜数量】⼤于30的进⾏⾼亮显⽰
57                        $.each(currentRowDataList, function (index, obj) {
58if (obj['num'] && obj['num'].value > 30) {
59                                obj['num'].row.css("background-color", "#FAB000");
60                            }
61                        })
62                    }// end done
63
64
65                });//der
66
67function dealLighthigh (rowIndexArr, bgColor) {
68                    $.each(rowIndexArr, function (index, val) {
69if (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")[wIndex]).css("background-color", val.bgColor ? val.bgColor : "yellow");
74                            $($("div .layui-table-fixed.layui-table-fixed-l .layui-table-body tr")[wIndex]).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>
View Code
效果图展⽰
图⼀：获取⾏数据
图⼆：对符合条件的⾏进⾏⾼亮显⽰图三：隐藏列
具体可以参考我发布在GitHub上的原⽂：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。