LayUI之table数据表格获取行、行高亮等相关操作
前言
目前LayUI数据表格既美观有不乏一些实用功能。基本上表格应有的操作已经具备，LayUI作者【贤心】肯定是煞费苦心去优化，此处致敬。但是实话实话，如果单纯那数据表格功能来说，EasUI的数据表格更能更加强大、更加灵活，怎奈于丑的没法说，当然可以美化，但是成本太高了。我相信在后续的LayUI版本更新中，作者应该会着重优化数据表格，因为作为一个前端框架，美观度、效率相关、导航相关、数据展现相关无疑是最重要的。
操作说明
现在转入我们今天要说的数据表格相关操作。目前LayUI数据表格获取行数据的方式有如下方式（个人理解有限，不全之后望提醒）：
- 表头加入checkbox列，用户选择一行或者多行数据后通过
var checkStatus = table.checkStatus('表格唯一ID值');
var data = checkStatus.data;
获取到相关行数据，其中 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} 返回当前数据表当前页的所有行数据。数据结构：<br/>
* [
* {字段名称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 {
}
}
}
})();
- 调用
完整示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<script src="../../js/jquery-3.3.1.js"></script>-->
<script src="../../js/layui.js"></script>
<script src="DataTableExtend.js"></script>
<link rel="stylesheet" href="../../js/css/layui.css" media="all"> <script>
(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 = '<div style="text-align: left"> 【当前页数据条数】' + currentRowDataList.length + '<br/>【当前行索引】' + index + '<br/>【触发的当前行单元格】' + currentData + '<br/>【当前行数据】' + JSON.stringify(rowData) + '</div>';
layer.msg(msg)
}) // 对相关数据进行判断处理--此处对【竞猜数量】大于30的进行高亮显示
$.each(currentRowDataList, function (index, obj) {
if (obj['num'] && obj['num'].value > 30) {
obj['num'].row.css("background-color", "#FAB000");
}
})
}// 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
})()
</script>
</head>
<body>
<table id="tableDataLoad" lay-filter="demo"></table> </body>
</html>
效果图展示
图一：获取行数据
图二：对符合条件的行进行高亮显示
图三：隐藏列
具体可以参考我发布在GitHub上的原文：点击此处直达
LayUI之table数据表格获取行、行高亮等相关操作的更多相关文章
- layui table 数据表格固定列的行高和table其他列的行高不一致
1.问题描述:使用layui的table数据表格,固定某一列,这样表格中数据的宽度超出屏幕宽度时,固定列可以一直显示在屏幕中,不会随着底部滚动栏左右的拖动而变化位置.但是遇到一个问题,就是固定列的行高 ...
- JS遍历表格获取每行数据及每个单元格数据
/** * 遍历表格获取每行数据及每个单元格数据 * @param tableID 表格ID */ function GetTable(tableID) { var milasUrl = {};//新 ...
- layui table数据表格reload where参数保留问题
layui table数据表格reload where参数保留问题 在使用layui过程中多多少少会遇到些问题 table reload 有个坑:reload时where参数会保留上次的参数,如果用 ...
- layui table 数据表格 隐藏列
现在国内的模板,也就layui一家独大了,其中的数据表格功能强大,但我不会用python或者django拼接json,输出发送给数据表格,那只好用笨办法,循环遍历吧. 数据表格中保留id列,是为了编辑 ...
- Layui数据表格/搜索重加载/分条件操作/工具条监听
<div class="layui-layout layui-layout-admin" style="padding-left: 20px;"> ...
- table数据表格添加checkbox进行数据进行两个表格左右移动。
<table class="table table-hover table-striped table-condensed newDateList"> <thea ...
- knockoutjs+jquery.gridgroup 实现table数据加载和行合并
目标 使用ajax获取到json数据后,通过ko绑定到表格,然后通过jquery.gridgroup插件实现行合并,效果如下: 步骤 1.引入插件 <script src="~/Scr ...
- layui中，同一个页面动态加载table数据表格
效果图: 前端代码: <div class="layui-fluid" id="record-user" hidden="hidden" ...
- WebService返回数据前台获取并处理JSON的相关问题
起因: 记录这个问题的起因是一次解答网友的问题,当初自己初次接触webservice时也遇到过,但在写答案时,并没有很深的印象,只是知道webservice在后台返回值的时候,那里是有个坑的.网友问的 ...
随机推荐
- 通过IF({1,0}和VLOOKUP函数实现Excel的双条件多条件查找的方法
在Excel中,通过VLOOKUP函数可以查找到数据并返回数据.不仅能跨表查找,同时,更能跨工作薄查找. 但是,VLOOKUP函数一般情况下,只能实现单条件查找. 如果想通过VLOOKUP函数来实现双 ...
- 使用localtunne一分钟搞定微信公众号接入
记得15年那个刚刚进入工作的时候,公司有个微信公众号的项目,那个时候微信官方没有什么调试工具,也没有什么比较好的本地调试工具.当时有个功能需要调用微信JSSDK里面的扫一扫的功能.由于本地不能调试 ...
- Linux增加LV（逻辑卷）容量
Linux增加LV(逻辑卷)容量 2017-09-29-17:34:13 个人原创博客,转载请注明出处. 查看逻辑卷的相关命令: lvs vgs 命令: [root@arch ~]# vgs VG # ...
- 剑指Offer-数组中重复的数字
package Array; /** * 数组中重复的数字 *在一个长度为n的数组里的所有数字都在0到n-1的范围内. * 数组中某些数字是重复的,但不知道有几个数字是重复的.也不知道每个数字重复几次 ...
- python之Redis的字符串类型操作
redis的数据类型: 字符串型 哈希 列表 集合 有序集合 1.String(字符串类型) set 命令: 设置一个键和值,键存在则只覆盖,返回ok > s ...
- pureftpd支持php实现图片上传
安装好php后,可安装pureftp工具 这里我给出一个rpm包可直接安装配置:http://pan.baidu.com/s/1i5OhS3r(包括启动脚本在内) FTP测试:安装ftp客户端,用户名 ...
- JS实现键盘监听
不说废话直接上正文: <html> <head> <meta http-equiv="Content-Type" content="text ...
- shior笔记
Shiro 是一个强大而灵活的开源安全框架,能够非常清晰的处理认证.授权.管理会话以及密码加密.如下是它所具有的特点: 易于理解的 Java Security API: 简单的身份认证(登录),支持多 ...
- Linux运维人员共用root帐户权限审计(转至马哥Linux运维）
一.应用场景 在中小型企业,公司不同运维人员基本都是以root 账户进行服务器的登陆管理,缺少了账户权限审计制度.不出问题还好, 出了问题,就很难找出源头.这里介绍下,如何利用编译bash 使不同的客 ...
- CSS美化网页元素
<span>标签 </span>属性名 含义 举例font-family 设置字体类型 font-family:"隶书"font-size 设置字体大小 f ...