如何为Autodesk Forge Viewer动态表格行添加点击隔离元素事件

原代码存在的问题 #

1. 循环使用var导致变量作用域污染，循环结束后i的值为数组长度，无法正确匹配对应行
2. 事件监听使用错误的事件名onClick，标准事件名应为click
3. 事件处理函数中myArrNames未定义，item参数无来源，逻辑无法执行
4. 获取行元素的代码放在循环外部，只能尝试获取不存在的索引行

修正方案一：循环内直接绑定事件（用let解决作用域问题） #

将循环变量var改为let，确保每次循环的i都是独立作用域，同时在循环内绑定点击事件：

var myTable = $('.my-table');
var myArr = rows; // 模型对象参数矩阵

// 先清空表格避免重复创建
myTable.empty();

for (let i = 0; i < myArr.length; i++) {
    // 建议用模型元素的唯一标识作为行ID，而非索引，避免重复
    const rowId = `model-item-${myArr[i][7]}`; // 假设myArr[i][7]是模型元素的唯一ID
    const rowHtml = `<tr id="${rowId}">
        <td>${myArr[i][0]}</td>
        <td>${myArr[i][1]}</td>
        <td>${myArr[i][2]}</td>
        <td>${myArr[i][3]}</td>
        <td>${myArr[i][4]}</td>
        <td>${myArr[i][5]}</td>
        <td>${myArr[i][6]}</td>
        <td>${myArr[i][7]}</td>
    </tr>`;
    myTable.append(rowHtml);
    
    // 获取刚创建的行并绑定点击事件
    const row = document.getElementById(rowId);
    row.addEventListener('click', function() {
        // 根据你的业务逻辑获取对应模型元素ID
        const elementIds = _this.modelData.getIds(myArr[i][1], myArr[i][0]);
        // 执行隔离操作
        _this.viewer.isolate(elementIds);
        // 可选：自动居中显示隔离的元素
        _this.viewer.fitToView(elementIds);
    });
}

修正方案二：事件委托（更高效，适合大量行场景） #

利用事件冒泡特性，直接给表格绑定事件，通过事件目标判断点击的行，避免循环内重复绑定事件：

var myTable = $('.my-table');
var myArr = rows; // 模型对象参数矩阵

// 清空表格
myTable.empty();

// 创建所有行，将模型参数存储在行的data属性中
for (let i = 0; i < myArr.length; i++) {
    const rowHtml = `<tr data-category="${myArr[i][1]}" data-label="${myArr[i][0]}">
        <td>${myArr[i][0]}</td>
        <td>${myArr[i][1]}</td>
        <td>${myArr[i][2]}</td>
        <td>${myArr[i][3]}</td>
        <td>${myArr[i][4]}</td>
        <td>${myArr[i][5]}</td>
        <td>${myArr[i][6]}</td>
        <td>${myArr[i][7]}</td>
    </tr>`;
    myTable.append(rowHtml);
}

// 给表格绑定点击事件，委托到行元素
myTable.on('click', 'tr', function() {
    // 从行的data属性中读取模型参数
    const category = $(this).data('category');
    const label = $(this).data('label');
    // 获取对应模型元素ID
    const elementIds = _this.modelData.getIds(category, label);
    // 执行隔离
    _this.viewer.isolate(elementIds);
    // 可选：居中显示
    _this.viewer.fitToView(elementIds);
});

关键注意点 #

• 确保_this.modelData.getIds()能正确返回模型元素的ID数组，Forge Viewer的isolate方法支持单个ID或ID数组
• 若需取消隔离，可调用_this.viewer.isolate([])
• 使用data-*属性存储模型参数比依赖数组索引更可靠，避免数组结构变化引发错误

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