layui数据表格如何获取id_LayUI之table数据表格获取行、行高亮等相关操作

前言

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

操作说明

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

表头加入checkbox列，用户选择一行或者多行数据后通过

var checkStatus = table.checkStatus('表格唯一ID值');

var data = checkStatus.data;

获取到相关行数据，其中 data 就是当前选中行的数据对象集合。具体参考： 点击此处直达

但是，如果说没有checkbox，没有行内工具条等设置，就一个常规表格，例如：

目标

要做到双击某一个单元格触发获取整行数据操作，可以拿到当前行tr的DOM对象以及单元格td的DOM对象，以便利用

能够根据相关条件进行数据筛选、进行高亮显示

能够获取某一个单元格数据，以及该单元格的DOM对象，以便利用

能够动态隐藏指定列(实际作用可能不大，因为隐藏数据的话直接在定义cols时不定义即可，LayUI的table数据对象还是会指向你服务端返回的数据，即：你服务端返回哪些字段，table数据容器会原封保留，只是你不在cols定义的话不进行展示，但是数据还是有的)，但是有时候可能也需要动态隐藏吧，所以保留了该功能

重点

相关逻辑写在table.render()方法的done回调中，例如：

table.render({

....

,//详细的配置此处就不描述了

,....

,done:function(res, curr, count){

// 此处写逻辑即可

}

});

相关实现

表格数据 点击此处直达 然后下载或者复制其内容自行新建文件即可。

JS实现

新建DataTableExtend.js的文件，代码如下：

var LayUIDataTable = (function () {

var rowData = {};

var $;

function checkJquery () {

if (!$) {

console.log("未获取jquery对象，请检查是否在调用ConvertDataTable方法之前调用SetJqueryObj进行设置！")

return false;

} else return true;

}

/**

* 转换数据表