如何更新JQXTreeGrid且不折叠所有行?
解决JQX TreeGrid更新后行全部折叠的问题
方法一:使用单行操作API代替全量刷新
直接针对每一行的增删改调用TreeGrid的对应方法,不会触发网格全量重置,自然保留展开状态:
修改你的updatetreegrid函数,替换直接修改数据源后全量刷新的逻辑:
function updatetreegrid(msg) { let { GridName, UpdateId, Rows } = msg; const grid = $("#grid" + GridName); const dataSource = window["data" + GridName]; // 替换eval,更安全 for (let i = 0; i < Rows.length; i++) { let row = Rows[i]; let rowId = row[UpdateId]; let doDelete = row.IsEmpty === 'DELETE'; let foundIndex = dataSource.findIndex(d => d[UpdateId] == rowId); if (doDelete) { if (foundIndex >= 0) { dataSource.splice(foundIndex, 1); grid.jqxTreeGrid('deleteRow', rowId); // 调用单行删除API } } else { if (foundIndex === -1) { dataSource.push(row); grid.jqxTreeGrid('addRow', rowId, row); // 调用单行添加API } else { dataSource[foundIndex] = row; grid.jqxTreeGrid('updateRow', rowId, row); // 调用单行更新API } } } }
这种方式仅对目标行进行操作,网格的展开状态不会被干扰,无需调用全量刷新方法。
方法二:保存展开状态后恢复
如果业务必须使用全量更新,可在更新前记录所有展开行的ID,更新完成后重新展开:
function updatetreegrid(msg) { let { GridName, UpdateId, Rows } = msg; const grid = $("#grid" + GridName); const dataSource = window["data" + GridName]; // 1. 记录所有展开行的ID const expandedRows = []; const rows = grid.jqxTreeGrid('getRows'); rows.forEach(row => { if (grid.jqxTreeGrid('isExpanded', row[UpdateId])) { expandedRows.push(row[UpdateId]); } }); // 2. 修改数据源(保留原有逻辑) for (let i = 0; i < Rows.length; i++) { let row = Rows[i]; let doDelete = row.IsEmpty === 'DELETE'; let foundIndex = dataSource.findIndex(d => d[UpdateId] == row[UpdateId]); if (doDelete) { if (foundIndex >= 0) { dataSource.splice(foundIndex, 1); } } else { if (foundIndex === -1) { dataSource.push(row); } else { dataSource[foundIndex] = row; } } } // 3. 全量更新后恢复展开状态 grid.jqxTreeGrid('updateBoundData'); expandedRows.forEach(rowId => { grid.jqxTreeGrid('expandRow', rowId); }); }
注意:需确保UpdateId是TreeGrid配置的key字段,否则expandRow无法正确定位行;若key字段不是UpdateId,需替换为对应字段名。
另外你之前尝试的beginUpdate/endUpdate仅用于批量操作时避免多次重绘,单独使用无法完成数据更新,需配合行操作API生效。
内容的提问来源于stack exchange,提问作者Charles Plager
相关产品推荐
相关产品推荐

