Node.js版Autodesk Forge应用切换项目时DataGridPanel表格不更新问题

核心问题分析与修复 #

1. 容器选择器冲突

你的代码中使用类选择器 .datagrid-container 初始化 Tabulator，但切换项目时若存在多个面板实例或DOM残留，会导致表格绑定到错误元素。改为直接引用当前面板内的容器元素：

initialize() {
    // ... 原有代码
    this.content = document.createElement('div');
    this.content.style.height = '350px';
    
    // 创建唯一容器并直接引用
    this.datagridContainer = document.createElement('div');
    this.datagridContainer.className = 'datagrid-container tabulator_modern';
    this.datagridContainer.style.position = 'relative';
    this.datagridContainer.style.height = '350px';
    this.content.appendChild(this.datagridContainer);
    
    // 用直接元素引用初始化表格
    this.table = new Tabulator(this.datagridContainer, {
        // ... 原有配置
    });
}

2. dataLoaded 函数作用域错误

原代码中 dataLoaded 使用普通函数，this 指向会丢失，导致无法调用 Tabulator 的 getGroups() 方法。改为箭头函数：

dataLoaded: (data) => {
    this.getGroups().forEach(group => group.hide());
}

3. 确保切换项目时正确调用 update 方法

切换项目时，需确认：

• 传入 update 的 model 是当前加载的新项目模型
• dbids 是新项目模型中有效的构件ID列表
• 若面板实例被复用，需在切换前调用 this.table.clearData() 清空旧数据

4. 验证 getBulkProperties 返回结果

检查控制台日志 update DG PANEL getBulkProperties() returned results:，确认返回的 results 数组非空且包含正确属性。若为空：

• 确认 DATAGRID_CONFIG.requiredProps 中的属性名与新项目模型的构件属性匹配
• 检查 dbids 是否为新项目模型中存在的有效ID

关于控制台警告的修复 #

你看到的警告是因为使用了已废弃的API，与表格刷新问题无关，但建议修复：
将 BubbleNode.getAecModelData() 替换为 Document.getAecModelData(bubbleNode)，并确保在调用前已加载 Document.downloadAecModelData。

完整修改后的代码片段 #

export class DataGridPanel extends Autodesk.Viewing.UI.DockingPanel {
    constructor(extension, id, title, options) {
        super(extension.viewer.container, id, title, options);
        this.extension = extension;
        this.container.style.left = (options.x || 0) + 'px';
        this.container.style.top = (options.y || 0) + 'px';
        this.container.style.width = (options.width || 800) + 'px';
        this.container.style.height = (options.height || 400) + 'px';
        this.container.style.resize = 'none';
    }

    initialize() {
        this.title = this.createTitleBar(this.titleLabel || this.container.id);
        this.initializeMoveHandlers(this.title);
        this.container.appendChild(this.title);
        this.content = document.createElement('div');
        this.content.style.height = '350px';
        
        // 创建唯一容器元素
        this.datagridContainer = document.createElement('div');
        this.datagridContainer.className = 'datagrid-container tabulator_modern';
        this.datagridContainer.style.position = 'relative';
        this.datagridContainer.style.height = '350px';
        this.content.appendChild(this.datagridContainer);

        // 初始化Tabulator表格
        this.table = new Tabulator(this.datagridContainer, {
            height: '100%',
            layout: 'fitColumns',
            columns: DATAGRID_CONFIG.columns,
            groupBy: DATAGRID_CONFIG.groupBy,
            rowClick: (e, row) => DATAGRID_CONFIG.onRowClick(row.getData(), this.extension.viewer),
            cellVertAlign: 'middle',
            cellClick: (e, cell) => {
                cell.getElement().style.fontSize = '10px';
            },
            // 修复作用域问题
            dataLoaded: (data) => {
                this.getGroups().forEach(group => group.hide());
            }
        });
    }

    update(model, dbids) {
        console.log('update() called with model:', model, 'and dbids:', dbids);
        model.getBulkProperties(dbids, { propFilter: DATAGRID_CONFIG.requiredProps }, (results) => {
            console.log('update DG PANEL getBulkProperties() returned results:', results);
            // 确保结果非空再更新
            if (results.length > 0) {
                this.table.replaceData(results.map((result) => DATAGRID_CONFIG.createRow(result.dbId, result.name, result.properties)));
                console.log('update DG PANEL Data replaced in table');
            } else {
                console.warn('No data returned from getBulkProperties');
                this.table.clearData();
            }
        }, (err) => {
            console.error('update DG PANEL Error in getBulkProperties():', err);
        });
    }
}

内容的提问来源于stack exchange，提问作者ang