Dojo Gridx 排序时输入框数据错乱问题解决方法
Dojo Gridx 排序时输入框数据错乱问题解决方法
在使用 Dojo Gridx 时,如果行中存在可输入的输入框,点击列头排序时,输入框里的数据可能会出现错乱。这是因为排序操作默认会重新渲染行内容,导致输入框里的数据丢失。
为了解决这个问题,可以使用 Gridx 的 'cacheClass' 属性来缓存行数据。这样,在重新排序时,Gridx 就会使用缓存数据来渲染行,而不会重新渲染输入框里的数据,从而避免数据错乱。
以下是一个示例代码:
require([
"gridx/Grid",
"gridx/core/model/cache/Sync",
"gridx/modules/ColumnResizer",
"gridx/modules/SingleSort",
"gridx/modules/CellWidget",
"gridx/modules/Edit",
"gridx/modules/Filter",
"gridx/modules/Pagination",
"gridx/modules/RowHeader",
"gridx/modules/select/Row",
"dojo/domReady!"
], function(Grid, Cache, ColumnResizer, SingleSort, CellWidget, Edit, Filter, Pagination, RowHeader, SelectRow){
var grid = new Grid({
id: 'grid',
cacheClass: Cache, // 缓存数据
store: store,
structure: columns,
modules: [
ColumnResizer, // 调整列宽度
SingleSort, // 单列排序
CellWidget, // 单元格编辑
Edit, // 行编辑
Filter, // 过滤器
Pagination, // 分页
RowHeader, // 行头
SelectRow // 行选择
],
selectRowTriggerOnCell: true, // 在单元格上激活行选择
autoHeight: true, // 自动调整高度
paginationInitialPageSize: 25, // 分页大小
paginationBarSizes: [25, 50, 100], // 可选分页大小
paginationBarVisibleSteppers: 3, // 可见分页步进
paginationBarVisiblePageSizes: false // 隐藏分页大小选择器
});
grid.placeAt('gridContainer');
grid.startup();
});
在这个示例中,我们使用了 cacheClass: Cache 属性来指定使用 Sync 缓存类来缓存行数据。这样,在排序时,Gridx 就会使用缓存的数据来渲染行,从而避免输入框里的数据被重新渲染。
通过使用 'cacheClass' 属性,我们可以有效地解决 Dojo Gridx 在排序时输入框数据错乱的问题,保证数据的完整性和一致性。
原文地址: https://www.cveoy.top/t/topic/ohME 著作权归作者所有。请勿转载和采集!