easyui datagrid表格点击行高亮

最新推荐文章于 2023-03-31 09:46:14 发布

原创最新推荐文章于 2023-03-31 09:46:14 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#easyui #datagrid

本文详细介绍了EasyUI框架中Datagrid组件的配置方法，包括如何设置行号、选择模式、自动行高、分页、字段自动分配等功能，并展示了如何通过代码实现表格数据的加载、样式定制以及事件监听。

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

$('#dg').datagrid({
	rownumbers : true,
	singleSelect : true,//多选
	autoRowHeight : false, //自动行高
	pagination : false, //显示表格下面的分页插件
	fitColumns : true, //字段自动分配
	striped : false,//显示斑马线背景
	collapsible : true, //表单收缩
	checkOnSelect : true,
	url : 'workPlan.action',//表格数据的请求路径
	method : 'post',
	queryParams: {},//post传参数
	pageNumber : 1, //默认显示第几页
	pageSize : 10,//每页显示的记录条数，默认为10 
	pageList : [ 10, 20, 30 ],//可以设置每页记录条数的列表  
	columns : [ [ 
	{
		field : 'uid',
		title : '序号',
		checkbox : true,
		hidden: true
	},
	{
		field : 'pro',
		title : 'pro1',
		width : '30%',
		align : 'pro'
	}, 
	{
		field : 'test',
		title : 'test1',
		width : '30%',
		align : 'center'
	}, 
	{
		field : 'unit',
		title : 'unit1',
		width : '30%',
		align : 'center'
	}

	] ],
	data: loadData,
	onLoadSuccess : function(data) {
		//唯一绿色高亮
		$('tbody tr.datagrid-row td').css({
			background:''
		});
		$('tbody tr[datagrid-row-index="0"]').find('td').css({
			background:'rgb(71,255,82)'
		});
	},
	//选中行或者多选框        
	onSelect : function(index, row) {
		//唯一绿色高亮
		$('tbody tr.datagrid-row td').css({
			background:''
		});
		$('tbody tr[datagrid-row-index='+index+']').find('td').css({
			background:'rgb(71,255,82)'
		});
	},
	//取消选中行或者多选框
	onUnselect : function(index, row) {

	},
	//选中全部时触发
	onSelectAll : function(index, row) {

	},
	//全部不选中时触发
	onUnselectAll : function(index, row) {

	}
});