| LayUI之table数据表格获取行、行高亮等相关操作 | 您所在的位置：网站首页 › layui表格获取所有数据 › LayUI之table数据表格获取行、行高亮等相关操作 |
LayUI之table数据表格获取行、行高亮等相关操作
|
前言
目前LayUI数据表格既美观有不乏一些实用功能。基本上表格应有的操作已经具备，LayUI作者【贤心】肯定是煞费苦心去优化，此处致敬。但是实话实话，如果单纯那数据表格功能来说，EasUI的数据表格更能更加强大、更加灵活，怎奈于丑的没法说，当然可以美化，但是成本太高了。我相信在后续的LayUI版本更新中，作者应该会着重优化数据表格，因为作为一个前端框架，美观度、效率相关、导航相关、数据展现相关无疑是最重要的。 操作说明现在转入我们今天要说的数据表格相关操作。目前LayUI数据表格获取行数据的方式有如下方式（个人理解有限，不全之后望提醒）： 表头加入checkbox列，用户选择一行或者多行数据后通过 1 var checkStatus = table.checkStatus('表格唯一ID值'); 2 var data = checkStatus.data;
获取到相关行数据，其中 data 就是当前选中行的数据对象集合。具体参考： 点击此处直达 但是，如果说没有checkbox，没有行内工具条等设置，就一个常规表格，例如：
表格数据 点击此处直达 然后下载或者复制其内容自行新建文件即可。 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} 返回当前数据表当前页的所有行数据。数据结构： 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
3
4
5 Title
6
7
8
9
10
11
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 = ' 【当前页数据条数】' + currentRowDataList.length + '【当前行索引】' + index + '【触发的当前行单元格】' + currentData + '【当前行数据】' + JSON.stringify(rowData) + '';
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
83
84
85
86
87
88
View Code
效果图展示 图一：获取行数据
具体可以参考我发布在GitHub上的原文：点击此处直达
|
【本文地址】
公司简介
联系我们