layui table选中的表格的行

layui table 表格选中改变当前行样式

2020-11-12 09:24:08

layui 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:08

17实现思路直接修改复选框选中状态和伪复选框(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:16

layui获取选中行数据的实例讲解发布时间：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:32

table ：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:32
layui 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:14
layui table有多行数据，通过外部输入内容，需要定位到指定行，选中改行，对改行进行操作。 HTML代码： <body> <div class="layui-fluid"> <input type="text" id="txt_id" /> <table ...
收起
js
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:03
layui.table（表格）跨页多选 layui版本：2.5.6 使用数据表格时可能会需要在翻页时保留各个页面选中行的信息，效果如下。实现思路，1.选中的时候刷新全选框状态 2.全选/全不选的时候刷新勾选框状态 3.翻页后刷新...
收起
javascript
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:51
table ： var tableIns = table.render({ elem:'#workTaskLogListTable' ,url: ctx+'/task/workTaskLog/query' ,error:admin.error ,cellMinWidth: 80 ,toolbar: '#workTaskLogListTable-toolbar' ,...
收起
jquery
layui数据表格选中行高亮显示,并传递被选中行的数据
2020-05-15 19:46:04
layui数据表格选中行高亮显示,并传递被选中行的数据直接上改代码 //定义一个全局的变量 var tmpobj=null; //定义一个全局要传递的id，方便取值 var uuid= ' ' ; //监听行单击事件 table.on('row(jf_company_...
收起
javascript js
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:30
layui表格中，行点击事件同时选中行前的单选框。 //表格监听行单击事件 table.on('row(test)', function(obj) { //选中行前radio Table.isCheckRadio(obj, form, table, 'tableReload'); //这是我的操作。。...
收起
javascript
layui table 多选指定数据不可选中_饿了么UI表格实现多选功能
2020-11-26 11:02:58
3 个需求勾选后台返回来的数据进行操作根据后台的打 √ 集合来进行勾选实现禁用只查看的功能解决方案使用饿了么 UI 的表格用到的方法select 当用户手动勾选数据行的 Checkbox 时触发的事件 selection, rowselect-all...
收起
layui 表格点击行实现CheckBox的选中与取消
千次阅读 2020-06-24 16:27:02
layui 表格点击行实现CheckBox的选中与取消 1、先引入layui相关的插件 2、在定义表格的地方设置 lay-filter 属性，注意了这个属性的名称需要跟表格id一致 <table id="tableBigType" lay-filter="tableBigType" ...
收起
layui表格监听checkbox是否选中并获取选中行的数据
万次阅读 2019-06-21 15:40:00
table.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:09
1.Layui数据表格单击一行选中复选框（每次只选中一项的复选框） $(document).on("click",".layui-table-body table.layui-table tbody tr", function () { var index = $(this).attr('data-index'); var ...
收起
checkbox
layui控制table列长度_layui表头宽度和表格一致_天天都要用的10个word表格技巧，工作再忙都要学会！...
2021-03-03 15:53:09
我是叨叨君~说起制作表格可不是Excel的专利，日常工作中，用Word制作表格也是常有的事儿，对于有些小伙伴来说，可能天天都要用，那么，用Word制作表格，有哪些技巧是我们必须要掌握的呢？今天叨叨君就来分享word中10...
收起
针对Layui数据表格单击tr行选中当前行的单选框或者复选框功能
2020-06-08 16:51:07
1、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
收起
javascript

layui table 表格选中改变当前行样式

原因

直接代码了

效果图

结束

layui table行点击tr_LayUI数据表格行单击事件中选中

layui的表格table选中数据后更改本行的颜色

layui中获取选中行的id_layui获取选中行数据的实例讲解

layui table行点击tr_00009 - layui 表格table 点击行的任意列即选中改行，其它行取消选择...

Layui表格选中指定行的radio单选框并滚动到该行的实现代码

layui 表格选中行同时选中复选框

layui table 加载完默认选中第一行的radio

layui问题之模拟table表格中的选中按钮选中事件的方法

Layui表格选中指定行的radio单选框并滚动到该行

layui获取选中行数据的实例讲解

layui.table（表格）跨页多选

layui.table(表格)跨页多选

layui table单选框选中事件

00009 - layui 表格table 点击行的任意列即选中改行，其它行取消选择

layui数据表格选中行高亮显示,并传递被选中行的数据

layui数据表格合并行,点击行选中合并行的checkbox

关于layui初始化table数据行选中的问题

layui 表格行单击事件选中行前的单选框

layui table 多选指定数据不可选中_饿了么UI表格实现多选功能

layui 表格点击行实现CheckBox的选中与取消

layui表格监听checkbox是否选中并获取选中行的数据

Layui数据表格单击一行选中复选框（每次只选中一项的复选框）

layui控制table列长度_layui表头宽度和表格一致_天天都要用的10个word表格技巧，工作再忙都要学会！...

针对Layui数据表格单击tr行选中当前行的单选框或者复选框功能

layuitable选中的表格的行

layui table 表格选中改变当前行样式

原因

直接代码了

效果图

结束

layui table行点击tr_LayUI数据表格行单击事件中选中

layui的表格table选中数据后更改本行的颜色

layui中获取选中行的id_layui获取选中行数据的实例讲解

layui table行点击tr_00009 - layui 表格table 点击行的任意列即选中改行，其它行取消选择...

Layui表格选中指定行的radio单选框并滚动到该行的实现代码

layui 表格选中行同时选中复选框

layui table 加载完默认选中第一行的radio

layui问题之模拟table表格中的选中按钮选中事件的方法

Layui表格选中指定行的radio单选框并滚动到该行

layui获取选中行数据的实例讲解

layui.table（表格）跨页多选

layui.table(表格)跨页多选

layui table单选框选中事件

00009 - layui 表格table 点击行的任意列即选中改行，其它行取消选择

layui数据表格选中行高亮显示,并传递被选中行的数据

layui数据表格合并行,点击行选中合并行的checkbox

关于layui初始化table数据行选中的问题

layui 表格行单击事件选中行前的单选框

layui table 多选 指定数据 不可选中_饿了么UI表格实现多选功能

layui 表格点击行实现CheckBox的选中与取消

layui表格监听checkbox是否选中并获取选中行的数据

Layui数据表格单击一行选中复选框（每次只选中一项的复选框）

layui控制table列长度_layui表头宽度和表格一致_天天都要用的10个word表格技巧，工作再忙都要学会！...

针对Layui数据表格单击tr行选中当前行的单选框或者复选框功能

layuitable选中的表格的行

layui table 多选指定数据不可选中_饿了么UI表格实现多选功能