layui行监听事件

最新推荐文章于 2024-05-14 09:38:54 发布

怜眸

最新推荐文章于 2024-05-14 09:38:54 发布

阅读量3.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： Layui

本文链接：https://blog.youkuaiyun.com/weixin_44588946/article/details/91355456

Layui 专栏收录该内容

4 篇文章

订阅专栏

这篇博客介绍了如何使用layui实现数据表格的行监听事件，当点击表格行时，改变选中行的背景颜色，以突出显示选中状态。内容包括功能效果展示、所需引用的jquery和layui样式、js文件，以及具体绑定数据表格和实现行监听事件的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

layui行监听事件

给大家分享的功能是layui行监听事件
功能效果：点击数据表格的行时给选中改变样式

效果图：
在这里插入图片描述
如图所示：第二行的背景颜色与其他行的颜色不同

调用方法：
首先要引用jquery和layui的css样式、js样式

<link href="~/Contents/assets/layui/css/layui.css" rel="stylesheet" />
<script src="~/Contents/js/jquery-3.3.1.min.js"></script>
<script src="~/Contents/assets/layui/layui.all.js"></script>

因为这个功能是基于layui和jquery做出来的，我们要引用css和js样式

我们先要绑定数据表格

layui.use('table', function () {
	var table = layui.table;
	table.render({
		elem: '#table',
		url: 'SelectDepartment', //数据接口
		page: true, //开启分页
		cols: [[ //表头
			{ type: 'numbers', title: '序号', align: 'center', width: 100 },
			{ field: 'DepartmentNumber', title: '部门编号', align: 'center' },
			{ field: 'Department', title: '部门名称', align: 'center' }
		]],
		id: 'table',
		toolbar: '#toolbarDemo',//开启自定义工具行，指向自定义工具栏模板选择器
		defaultToolbar: ['filter', 'print', 'exports']
	});

//行监听事件
	table.on('row(test)', function (obj) {
		obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
	});
});

我这个行监听事件主要是点击选中行改变背景颜色，让使用人知道该行是否选中