解决easyui datagrid行编辑后序号错乱的问题

最新推荐文章于 2024-09-19 15:57:45 发布

原创最新推荐文章于 2024-09-19 15:57:45 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

web开发专栏收录该内容

14 篇文章

订阅专栏

当使用EasyUI的datagrid组件进行行编辑并完成编辑后，可能会遇到行号显示错乱的问题。解决方法是通过自定义函数`myFixRownumber`来修正行号。该函数根据行号来源（grid配置或自定义列）进行不同的处理，遍历并更新每个单元格的行号。为了提高性能，可以改进函数，只修正被编辑的行，通过传入当前行索引来实现。此外，对于有自定义列显示序号的情况，需要与formatter函数配合使用。

问题描述：使用easyui的datagrid组件的行编辑功能，当确认某行编辑完成后，序号出现错乱，如下图所示。

解决方法：自定义函数，编辑完成后调用该函数，来修正序号。

函数代码：

function myFixRownumber(serialNumFieldName) {
	if (serialNumFieldName == undefined) {//行号来自grid本身的配置参数，即rownumbers: true
		$('div.datagrid-cell-rownumber').each(function (rowindex) {
			var realRowNumber = parseInt(rowindex) + 1;
			$(this).html(realRowNumber);
		});
	} else { //行号来自指定的自定义列
		$('tr.datagrid-row div.datagrid-cell-c2-' + serialNumFieldName).each(function (rowindex) {
			var realRowNumber = parseInt(rowindex) + 1;
			$(this).html(realRowNumber);
		});
	}
}

说明：本函数可应对两种情况

1. 行号来自datagrid配置参数，即datagrid的配置项rownumbers为true，此时调用该函数无需实参。

2. 行号来自指定的自定义列，典型自定义列如下：

{
    field: "serialno", title: "序号", align: "center", width: 60,
    formatter: function (value, row, index) {  
        var gridOpts = $('#pg').pagination('options');//pg为分页控件id
        return gridOpts.pageSize * (gridOpts.pageNumber - 1) + (index + 1);
    }
}

此时调用该函数需要将用于显示序号的自定义列的列名（如上面代码中为“serialno”）作为实参传递给该函数，与行的formatter函数配合来修正行号。

【改进】myFixRownumber函数修正了所有行，可以增加一个行索引参数，只修正被编辑的行或指定某行，以改善性能。

function myFixRownumber(currIndex, serialNumFieldName) { //一次修正一行
	if (serialNumFieldName == undefined) {//行号来自grid本身的配置参数
		$('tr#datagrid-row-r1-1-' + currIndex + ' div.datagrid-cell-rownumber').html(parseInt(currIndex) + 1);
	} else { //行号来自指定的自定义列
		$('tr#datagrid-row-r2-2-' + currIndex + ' div.datagrid-cell-c2-' + serialNumFieldName).html(parseInt(currIndex) + 1);
	}
}