esayUI datagrid分组的折叠与展开

vace cc

于 2023-04-17 18:41:03 发布

阅读量692

点赞数

文章标签： javascript

vace

本文链接：https://blog.csdn.net/gd898989/article/details/130206549

版权

文章讲述了在JSP项目中使用EasyUI框架开发时遇到的问题，即datagrid分组的折叠状态无法在数据刷新后保持。作者通过创建并管理groupColl数组来记录分组的折叠状态，在加载数据成功后根据groupColl调整分组的展开或折叠状态，同时添加了一个监听函数来实时更新groupColl，确保每次数据更新后都能正确恢复用户的折叠设置。

摘要由CSDN通过智能技术生成

datagrid分组的折叠与展开

最近在开发jsp 方面的项目，用到esayUI的样式框架，在官方文档中没有支持监听datagrid分组的折叠展开情况，每次刷新数据后，要么全部折叠，要没全部展开，没有按照用户折叠后更新数据依然是折叠、或展开，这里做一下处理

// 生命参数
var groupColl = []

$(document).ready(_ => {
	initElementTable()
})
function initElementTable() {
	$("#el-table").datagrid({
		fit: true,
		rownumbers:true,
		singleSelect:true,
		checkOnSelect:false,
		selectOnCheck:false,
		toolbar: "#el-butoons",
		cloumns:[[
			{
			fileld:"id",
			title:"ID",
			width: 100,
			hidden: true	
			},{
			fileld:"name",
			title:"NAME",
			width: 100
			},{
			fileld:"class",
			title:"CLASS",
			width: 100
			},
		]],
		groupField: "class",
		view:groupview,
		groupFormatter: (value, row) {
			return value;
		}，
		onLoadSuccess: (data) => {
			// 调用collapse
			collapse()
			// 根据groupColl 进行开启或者关闭
			groupColl.forEach( x => {
				$("#el-table").datagrid("collapseGroup", x)
			})
		}
	
	})
}
/**
 * 监听表格折叠
 * 每次点击分组框都会重新统计被折叠的分组
 * 每次获取新数据都要重新调用，在源码中，更新数据都会重新销毁分组，生成新的分组
 */
 
 function collapse() {
	// 该class是分组中必带的，直接获取class名就可, 如果是多个表，需要指定某表id下的class
	$(".datagrid-row-expander").on("click", res =>{
		// 参数赋空
		groupColl = []
		// 延时后获取分组的className 
		// 如果不延时获取 则会获取到折叠之前的状态，导致监听的都是上一次的折叠状态
		setTimeout(_=>{
			let expanders = $(".datagrid-row-expander")
			expanders.forEach((x,i) =>{
				let className = x.className + ""
				// 判断分组不是展开状态的className
				if(className.indexOf("datagrid-row-collapse") < 0) {
					groupColl.push(i)
				}
			})
		},200)
	})
 }