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

前言

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

操作说明

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

表头加入checkbox列,用户选择一行或者多行数据后通过
 var checkStatus = table.checkStatus('表格唯一ID值');
 var data = checkStatus.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} 返回当前数据表当前页的所有行数据。数据结构:
* [ * {字段名称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 { } } } })();
调用

完整示例:




    
    Title
    
    
    
    

    


https://www.cnblogs.com/geekworld/p/8794150.html

你可能感兴趣的:(LAYUI)