-
layui table 表格选中改变当前行样式
2020-11-12 09:24:08layui table 表格选中行并改变样式,很多资源都写得很麻烦,所以直接上我开发中的一个解决方法,不一定最好,但是我认为最简单。 这个适用于一个页面出现多个layui-table的情况,原因所在是:lay-fliter的选择 代码...原因
layui table 表格选中行并改变样式,很多资源都写得很麻烦,所以直接上我开发中的一个解决方法,不一定最好,但是我认为最简单。
- 这个适用于一个页面出现多个layui-table的情况,原因所在是:lay-fliter的选择
- 代码中有几个编号,重点关注(编号代码处都有注释,不再进行复述)
- 最后写了一个简单demo进行展示,并附有截图
直接代码了
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>table test</title> <link rel="stylesheet" href="./layui/css/layui.css" media="all"> <script src="./js/jquery-1.4.4.min.js" charset="utf-8"></script> <script src="./layui/layui.js" charset="utf-8"></script> <style> .table-tr-selected-bg{ /* 1. table默认是有背景色的你要保证优先加载你的,所以使用important */ background-color: #6189a7 !important; color: #FFF; } </style> </head> <body> <div> <blockquote class="layui-elem-quote layui-text">layui table click</blockquote> <!-- 2. lay-filter 注意,这是该操作的核心 --> <table id="test" lay-filter="test-filter"> </table> </div> </body> <script type="text/javascript"> var element; var table; var layer; var json = [ {'username':'测试数据','sex':'男'}, {'username':'测试数据','sex':'男'}, {'username':'测试数据','sex':'男'}, {'username':'测试数据','sex':'男'}, {'username':'测试数据','sex':'男'}, {'username':'测试数据','sex':'男'}, {'username':'测试数据','sex':'男'}, {'username':'测试数据','sex':'男'}, {'username':'测试数据','sex':'男'}, {'username':'测试数据','sex':'男'}, {'username':'测试数据','sex':'男'}, {'username':'测试数据','sex':'男'}, {'username':'测试数据','sex':'男'}, {'username':'测试数据','sex':'男'}, {'username':'测试数据','sex':'男'}, {'username':'测试数据','sex':'男'}, {'username':'测试数据','sex':'男'}, {'username':'测试数据','sex':'男'}, {'username':'测试数据','sex':'男'}, {'username':'测试数据','sex':'男'}, {'username':'测试数据','sex':'男'}, {'username':'测试数据','sex':'男'}, {'username':'测试数据','sex':'男'}, {'username':'测试数据','sex':'男'}, {'username':'测试数据','sex':'男'}, {'username':'测试数据','sex':'男'}, {'username':'测试数据','sex':'男'}, {'username':'测试数据','sex':'男'}, {'username':'测试数据','sex':'男'}, {'username':'测试数据','sex':'男'}, {'username':'测试数据','sex':'男'}, {'username':'测试数据','sex':'男'} ] //3. 选择对应的模块进行加载,优化页面的加载速度 layui.use(['element', 'table', 'layer'], function(){ element = layui.element; table = layui.table; layer = layui.layer; init_table(); }); //4. 初始化页面的数据表格 function init_table(){ table.render({ elem: '#test' ,data: json ,cols: [[ {field:'username', width:'50%', title: '用户名'} ,{field:'sex', width:'50%', title: '性别', sort: true} ]] ,page: true }); table.on('row(test-filter)',function(obj){ //5. 这就是你的选中行,直接操作 console.info(obj.tr); /**先移除,在添加,流程不用质疑*/ $('.table-tr-selected-bg').removeClass('table-tr-selected-bg'); $(obj.tr).addClass('table-tr-selected-bg'); //6. 其他操作自定义即可 layer.msg(JSON.stringify(obj.data)); }); } </script> </html>
效果图
结束
文章为原创,转载请附载本文链接。
-
layui table行点击tr_LayUI数据表格行单击事件中选中
2020-12-19 07:23:0817实现思路直接修改复选框选中状态和伪复选框(DIV)Class但是调用checkStatus获取不到选中的行查看底层源代码checkStatus方法的实现是缓存数据中的属性来判断是否选中所以循环缓存数据,用index找到操作数据修改,...2019年9月5日11:19:17
实现思路
直接修改复选框选中状态和伪复选框(DIV)Class
但是调用checkStatus获取不到选中的行
查看底层源代码checkStatus方法的实现是缓存数据中的属性来判断是否选中
所以循环缓存数据,用index找到操作数据修改,再次获取选中行就可以获取到了
table.on(‘row(test)‘,function(obj){
var flag = !obj.tr.find(‘:checkbox:first‘).attr(‘checked‘);
obj.tr.find(‘:checkbox‘).attr(‘checked‘,flag);
if(flag){
obj.tr.find(‘.layui-form-checkbox‘).addClass(‘layui-form-checked‘);
}else{
obj.tr.find(‘.layui-form-checkbox‘).removeClass(‘layui-form-checked‘);
}
layui.each(table.cache.userTable,function(i,l){
if(obj.tr.index()==l.LAY_TABLE_INDEX){
l.LAY_CHECKED=flag;
}
});
});
原文:https://www.cnblogs.com/wangfeii/p/11464726.html
-
layui的表格table选中数据后更改本行的颜色
2018-10-17 11:54:43在layui的表格table中,选中某行数据之后更改本行颜色,取消选中后恢复原样式。在layui的表格table中,选中某行数据之后更改本行颜色,取消选中后恢复原样式。 -
layui中获取选中行的id_layui获取选中行数据的实例讲解
2020-12-30 09:24:16layui获取选中行数据的实例讲解发布时间:2020-08-30 02:54:43来源:脚本之家阅读:203第一步: 在jsp文件中设置按钮获取选中行数据获取选中数目验证是否全选第二步:在jsp文件中创建表格ID用户名性别城市签名积分...layui获取选中行数据的实例讲解
发布时间:2020-08-30 02:54:43
来源:脚本之家
阅读:203
第一步: 在jsp文件中设置按钮
获取选中行数据
获取选中数目
验证是否全选
第二步:在jsp文件中创建表格
ID用户名性别城市签名积分职业财富评分
第三步:写js,监听事件
layui.use('table', function(){
var table = layui.table;
var $ = layui.$, active = {
getCheckData: function(){ //获取选中数据
var checkStatus = table.checkStatus('idTest')
,data = checkStatus.data;
layer.alert(JSON.stringify(data));
}
};
以上这篇layui获取选中行数据的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持亿速云。
-
layui table行点击tr_00009 - layui 表格table 点击行的任意列即选中改行,其它行取消选择...
2021-01-27 04:25:32table :var tableIns = table.render({elem:'#workTaskLogListTable',url: ctx+'/task/workTaskLog/query',error:admin.error,cellMinWidth: 80,toolbar: '#workTaskLogListTable-toolbar',defaultToolbar: [{title...table :
var tableIns = table.render({
elem:'#workTaskLogListTable'
,url: ctx+'/task/workTaskLog/query'
,error:admin.error
,cellMinWidth: 80
,toolbar: '#workTaskLogListTable-toolbar'
,defaultToolbar: [{
title: '条件过滤' //标题
,layEvent: 'searchDiv' //事件名,用于 toolbar 事件中使用
,icon: 'layui-icon-search' //图标类名
},
'filter', 'print', 'exports']
,cols: [[
{type: 'checkbox'/*, fixed: 'left'*/}
,{field:'content', title: '日志内容', align: 'center',width:130 }
,{field:'userName', title: '操作人', align: 'center',width:130 }
,{field:'status', title: '状态', align: 'center',width:130,templet:tplStatus}
,{field:'createTime', title: '创建时间', align: 'center',width:160,templet:tplCreateTime}
,{title:'操作', toolbar: '#workTaskLogListTable-bar', width:150}
]]
,page: true
,limit: 10
,limits: layui.setter.limits
,done: function(res, curr, count){
}
,height: 'full-110'
});
说明:{type: 'checkbox'/, fixed: 'left'/} , 要是功能有效,即表的列 不能有fixed属性。
调用方法:
admin.tableRowCheckToggle();
方法体为:
admin.tableRowCheckToggle = function () {
$('body').on('click', '.layui-table-body tr', function(e){
$('.layui-form-checkbox', this).click();
$('.layui-form-checkbox.layui-form-checked', this.parent).click();
$('.layui-form-checkbox', this).click();
})
$('body').on('click', '.layui-form-checkbox', function(e){
e.stopPropagation();
})
}
-
Layui表格选中指定行的radio单选框并滚动到该行的实现代码
2020-12-28 16:21:32layui table有多行数据,通过外部输入内容,需要定位到指定行,选中改行,对改行进行操作。 实现效果: HTML代码: <body> <div class=layui-fluid> <input type=text id=txt_id /> <table class=... -
layui 表格选中行同时选中复选框
2019-03-22 09:20:29有2种实现方式,各有利弊 ...问题:layui的行点击事件不会触发了 $(document).on("click", ".layui-table-body table.layui-table tbody tr", function() { var index = $(this).attr('data-index'); var ta... -
layui table 加载完默认选中第一行的radio
2019-09-06 17:37:02$(".layui-table-view[lay-id='这里是table表格的Id'] .layui-table-body tr[data-index=0] .layui-form-radio").click(); 将上面这就话写在done回调函数里面. data-index=0 表示第一行. ... -
layui问题之模拟table表格中的选中按钮选中事件的方法
2020-12-13 14:44:10不操作页面,实现table表格中的checkbox选中功能 二、经过 刚开始的思路: 1、通过table的id,找到table渲染时生成的div,即table的下一个兄弟节点div.layui-table-view 2、由于checkbox是固定列,再通过第一步,... -
Layui表格选中指定行的radio单选框并滚动到该行
2020-07-14 17:16:14layui table有多行数据,通过外部输入内容,需要定位到指定行,选中改行,对改行进行操作。 HTML代码: <body> <div class="layui-fluid"> <input type="text" id="txt_id" /> <table ... -
layui获取选中行数据的实例讲解
2020-12-29 11:37:55获取选中行数据</button> <button class=layui-btn data-type=getCheckLength>获取选中数目</button> <button class=layui-btn data-type=isAll>验证是否全选</button> 第二步:... -
layui.table(表格)跨页多选
2020-10-16 14:05:03layui.table(表格)跨页多选 layui版本:2.5.6 使用数据表格时可能会需要在翻页时保留各个页面选中行的信息,效果如下。 实现思路,1.选中的时候刷新全选框状态 2.全选/全不选的时候刷新勾选框状态 3.翻页后刷新... -
layui.table(表格)跨页多选
2019-07-19 16:09:39使用数据表格时可能会需要在翻页时保留各个页面选中行的信息,效果如下。 效果演示 实现思路 实现思路大致分为以下三步 1.定义两个全局变量用于保存选中行的id,以及当前页所有行的id(全选时使用) 2.监听表格复选... -
layui table单选框选中事件
2018-10-24 11:44:43其中demo为表格(table)的lay-filter 单选框选中事件监听: table.on(‘radio(demo)’, function(obj){ //查看obj结构 // console.log(obj); //是否选中,选中为true // console.log(obj.checked); //... -
00009 - layui 表格table 点击行的任意列即选中改行,其它行取消选择
2020-05-22 21:07:51table : var tableIns = table.render({ elem:'#workTaskLogListTable' ,url: ctx+'/task/workTaskLog/query' ,error:admin.error ,cellMinWidth: 80 ,toolbar: '#workTaskLogListTable-toolbar' ,... -
layui数据表格选中行高亮显示,并传递被选中行的数据
2020-05-15 19:46:04layui数据表格选中行高亮显示,并传递被选中行的数据 直接上改代码 //定义一个全局的变量 var tmpobj=null; //定义一个全局要传递的id,方便取值 var uuid= ' ' ; //监听行单击事件 table.on('row(jf_company_... -
layui数据表格合并行,点击行选中合并行的checkbox
2019-10-15 16:07:00$(document).on(“click”,".layui-table-body table.layui-table tbody tr",function(){ var tr = $(this); //从哪行开始选中 var numth = $(tr).attr(“data-index”); var trd = $(".layui-table-main tr[data... -
关于layui初始化table数据行选中的问题
2020-06-17 10:55:36有一个这样的业务需求,就是当layui table中某页的数据被用户选中完以后,用户切换到下一页浏览,然后再返回到该页面的时候,之前选中的数据应该保持选中的状态。 全局变量ck_Ids: var ck_Ids=[];//存储的表格数据... -
layui 表格行单击事件选中行前的单选框
2020-12-31 13:49:30layui表格中,行点击事件同时选中行前的单选框。 //表格监听行单击事件 table.on('row(test)', function(obj) { //选中行前radio Table.isCheckRadio(obj, form, table, 'tableReload'); //这是我的操作。。... -
layui table 多选 指定数据 不可选中_饿了么UI表格实现多选功能
2020-11-26 11:02:583 个需求勾选后台返回来的数据进行操作根据后台的打 √ 集合来进行勾选实现禁用只查看的功能解决方案使用饿了么 UI 的表格用到的方法select 当用户手动勾选数据行的 Checkbox 时触发的事件 selection, rowselect-all... -
layui 表格点击行实现CheckBox的选中与取消
2020-06-24 16:27:02layui 表格点击行实现CheckBox的选中与取消 1、先引入layui相关的插件 2、在定义表格的地方 设置 lay-filter 属性,注意了这个属性的名称需要跟表格id一致 <table id="tableBigType" lay-filter="tableBigType" ... -
layui表格监听checkbox是否选中并获取选中行的数据
2019-06-21 15:40:00table.on('checkbox(table-id)', function(obj){ console.log(obj.checked);... //选中行的相关数据 console.log(obj.type); //如果触发的是全选,则为:all,如果触发的是单选,则为:one console.log(ta... -
Layui数据表格单击一行选中复选框(每次只选中一项的复选框)
2019-09-13 13:00:091.Layui数据表格单击一行选中复选框(每次只选中一项的复选框) $(document).on("click",".layui-table-body table.layui-table tbody tr", function () { var index = $(this).attr('data-index'); var ... -
layui控制table列长度_layui表头宽度和表格一致_天天都要用的10个word表格技巧,工作再忙都要学会!...
2021-03-03 15:53:09我是叨叨君~说起制作表格可不是Excel的专利,日常工作中,用Word制作表格也是常有的事儿,对于有些小伙伴来说,可能天天都要用,那么,用Word制作表格,有哪些技巧是我们必须要掌握的呢?今天叨叨君就来分享word中10... -
针对Layui数据表格单击tr行选中当前行的单选框或者复选框功能
2020-06-08 16:51:071、table单击tr行勾选checkbox功能: ... $(document).on("click",".layui-table-body table.layui-table tbody tr", function () { var index = $(this).attr('data-index'); var tableBox = $(this).parents