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

最新推荐文章于 2024-09-24 15:45:18 发布

简是一种态度

最新推荐文章于 2024-09-24 15:45:18 发布

阅读量2.4k

点赞数

文章标签： layui ui

本文链接：https://blog.csdn.net/liu__hui2008ooo/article/details/109635900

版权

原因

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>