You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何更新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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.04 19:43:14