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;
}
/**
* 转换数据表格。
* @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
(function () {
layui.use(['table', 'layer'], function () {
var table = layui.table;
var layer = layui.layer;
var $ = layui.jquery;
table.render({
id: "tableID"// 设定表格的唯一ID进行标识
, elem: '#tableDataLoad'// 绑定table对应的元素
, height: 'full-300'
, url: 'data2.json' // TODO: 此处写你实际数据来源
, size: 'sm'
, page: true
, limits: [10, 20, 30, 40, 50]
, limit: 30
, cols: [[
{field: 'match_name', width: 93, align: 'center', title: '比赛名称', rowspan: 2}
, {align: 'center', title: '比赛信息', colspan: 3}
, {field: 'jingcai', width: 200, align: 'center', title: '竞猜项', rowspan: 2}
, {field: 'num', width: 100, align: 'center', title: '竞猜数量', rowspan: 2}
]
, [
{field: 'match_time_beijing', width: 200, align: 'center', title: '比赛时间'}
, {field: 'match_master', width: 100, align: 'center', title: '主队'}
, {field: 'match_guest', width: 100, align: 'center', title: '客队'}
]]
, done: function (res, curr, count) {// 表格渲染完成之后的回调
$(".layui-table th").css("font-weight", "bold");// 设定表格标题字体加粗
LayUIDataTable.SetJqueryObj($);// 第一步:设置jQuery对象
//LayUIDataTable.HideField('num');// 隐藏列-单列模式
//LayUIDataTable.HideField(['num','match_guest']);// 隐藏列-多列模式
var currentRowDataList = LayUIDataTable.ParseDataTable(function (index, currentData, rowData) {
console.log("当前页数据条数:" + currentRowDataList.length)
console.log("当前行索引:" + index);
console.log("触发的当前行单元格:" + currentData);
console.log("当前行数据:" + JSON.stringify(rowData));
var msg = '
【当前行索引】' + index + '
【触发的当前行单元格】' + currentData + '
【当前行数据】' + JSON.stringify(rowData) + '
';
layer.msg(msg)
})
// 对相关数据进行判断处理--此处对【竞猜数量】大于30的进行高亮显示
$.each(currentRowDataList, function (index, obj) {
/*
* 通过遍历表格集合,拿到每行数据对象obj,通过obj["列名"]["row"]可以拿到行对象,obj["列名"]["cell"]可以拿到单元格对象
* */
if (obj['num'] && obj['num'].value > 30) {
obj['num']["row"].css("background-color", "#FAB000");// 对行(row)进行高亮显示
obj["num"]["cell"].css("font-weight","bold");// 对单元格(cell)字体进行加粗显示
}
})
}// end done
});//end table.render
function dealLighthigh (rowIndexArr, bgColor) {
$.each(rowIndexArr, function (index, val) {
if (typeof val == "number") {
$($(".layui-table-body.layui-table-main tr")[val]).css("background-color", bgColor ? bgColor : "yellow");
$($("div .layui-table-fixed.layui-table-fixed-l .layui-table-body tr")[val]).css("background-color", bgColor ? bgColor : "yellow");
} else if (typeof val == 'object') {
$($(".layui-table-body.layui-table-main tr")[val.rowIndex]).css("background-color", val.bgColor ? val.bgColor : "yellow");
$($("div .layui-table-fixed.layui-table-fixed-l .layui-table-body tr")[val.rowIndex]).css("background-color", val.bgColor ? val.bgColor : "yellow");
}
})
}
});// end layui use
})()
效果图展示
图一:获取行数据
图二:对符合条件的行进行高亮显示
图三:隐藏列
特别说明
通过 LayUIDataTable.HideField隐藏列之后如果进行排序出现被隐藏的列再次出现的问题,解决方案如下:
监听排序事件,进行隐藏处理
table.on('sort(demo)', function(obj){
// 此处写你要隐藏的field
$("[data-field='num']").css('display', 'none');
//....
//.....
// 其它逻辑自行处理
//.....
});
layui数据表格如何获取id_LayUI之table数据表格获取行、行高亮等相关操作相关推荐
- R语言使用order函数按照两个数据列的值排序data.table数据(主变量降序排序、次变量升序排序)
R语言使用order函数按照两个数据列的值排序data.table数据(主变量降序排序.次变量升序排序) 目录
- layui表格 设置默认排序_layui table对表格数据处理后的排序问题
table模块是layui最核心的组成之一,它用于对表格进行一些列功能和动态化数据操作.在 table模块对表格数据处理后排序可能出现问题,本文就来为大家介绍一下解决这种问题的方法. 使用layui ...
- Html表格导出word,JavaScript 导出Table数据到Word和Excel
1.如果Table中有Input(text)之类的元素,需要先修改Input的outerHTML: 具体例子:function resetInput() { var controls = docume ...
- layui 自定义request_layui中使用自定义数据格式对数据表格进行渲染
1.引入 2.页面代码 编辑 删除 layui.use('table', function(){ var table = layui.table; table.render({ elem: '[lay ...
- 如何在Lua与C/C++之间实现table数据的交换
为什么80%的码农都做不了架构师?>>> 之前在<C/C++和Lua是如何进行通信的?>一文中简单的介绍了lua与宿主之间的通信.简单的说两种不同的语言之间数据类型不一样 ...
- Oracle数据库:sql语言结构,数据查询语言DQL,select * from table;算术,别名,连接,去重等操作
Oracle数据库:sql语言结构,数据查询语言DQL,select * from table;算术,别名,连接,去重等操作 2022找工作是学历.能力和运气的超强结合体,遇到寒冬,大厂不招人,可能很 ...
- ajax怎样获得表头信息,layui.table动态获取表头和列表数据示例
layui.table动态获取表头和列表数据示例 2020年07月14日 | 萬仟网IT编程 | 我要评论 ```javascript//表格layui.use('table', function() ...
- layui table数据表格中数据返回成功,但页面不显示数据内容问题
layui table数据表格中数据返回成功,但页面不显示数据内容问题. 这是我做毕业设计的时候自己遇到的问题,后来查看了网上的一些技术贴子而得到解决,所以便想总结一个大概的方法,供大家参考! 一般导 ...
- layui数据表格解析html,layui框架table 数据表格的方法级渲染详解
layui框架table 数据表格的方法级渲染详解 如下所示: //js 规范书写 var tst=table.render({ elem: '#test11' ,cols: [[ //标题栏 {ch ...
最新文章
- 如何检出SVN老版本代码
- 昆仑mcp文件是什么版本_昆仑健康保2.0升级版怎么样?有哪些优缺点?
- 程序代码移植和烧录需要注意什么_购买建站模板需要注意什么问题
- word公式插件_再也不用担心我的公式写不出来了:一款公式输入神器实测
- GDI+ 透明窗口.UpdateLayeredWindow
- python接管已经打开的浏览器_Python Webdriver 从新使用已经打开的浏览器实例
- pg 简单备份和恢复
- (转)比特币核心钱包(Bitcoin Core)入门使用教程
- awgn信道matlab,AWGN信道下数字通信系统的蒙特卡洛仿真(基于matlab).doc
- python 生成 exe
- 统考计算机各题型分数,计算机等级考试分值
- Python转义字符及用法
- 爬取 48048 条评论,解读 9.3 分的「毒液」是否值得一看?
- R语言使用cph函数和rcs函数构建限制性立方样条cox回归模型、使用ggcoxzph函数可视化进行Schoenfeld残差图检验模型是否满足等比例风险
- 基于WS协议的webSocket通信
- 智能音箱的五大核心技术
- 服务器宕机 自动重启,服务器宕机重启利弊
- 智能卡 ISO14443 协议 解读
- vivado报错:USF-XSim-62的常见解决办法
- redis计算经纬度距离