Autodesk forge 查看器表格行单击以隔离元素

Question

我正在尝试在查看器页面内创建一个动态表。 表格的每一行代表来自 model 的 object，并且有几个不同的参数（名称、级别等）。我想在每一行上进行单击事件，以隔离查看器的 Z20F35E630534DB88C3F6 中的元素。

我已经使用 js 以编程方式创建了表。 （按下外部命令按钮后创建表）

如何将事件侦听器添加到行单击中，以隔离元素？

这是我按下命令按钮后创建表格的代码：

var myTable = $('.my-table');
var myArr = rows; //matrix of object values

for (var i = 0; i < myArr.length; i++)
    myTable.append("<tr id=" + i + ">" +
        " <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 id=" + "tt" + ">" + myArr[i][7] + "</td>" +
        "</tr>");
const row = document.getElementById(`${i}`);
row.addEventListener('onClick', function(evt, item) { /// we are using a viewer api property to  isolate the 
    _this.viewer.isolate(_this.modelData.getIds(myArrNames[i][1], item[0]._model.label));

});

Answer 1

首先，这不是 Forge 问题，而是 JavaScript 语法和缩进问题。

重新缩进你的代码后，你可以看到添加点击事件的代码不在for循环中，所以你需要添加括号对来包含添加点击事件到for循环的代码。

在没有括号{和}的 JavsScirpt 中定义 for 循环时，它只占用计数中的第一行。

此外，没有onClick事件。 使用addEventListener时，事件名称是click ，而不是onClick 。

var myTable = $('.my-table');
var myArr = [[1,2,3,4,5,6,7], [1,2,3,4,5,6,7]]; //matrix of object values

for (var i = 0; i < myArr.length; i++) {
    myTable.append("<tr id=" + i + ">" +
        " <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 id=" + "tt" + ">" + myArr[i][7] + "</td>" +
        "</tr>");

        const row = document.getElementById(`${i}`);
        row.addEventListener('click', function(evt) { /// we are using a viewer api property to  isolate the 
            _this.viewer.isolate(_this.modelData.getIds(myArrNames[i][1], item[0]._model.label));
        
        });
}

要使用onClick ，它将变为：

const row = document.getElementById(`${i}`);
row.onClick = function(evt) { /// we are using a viewer api property to  isolate the 
    _this.viewer.isolate(_this.modelData.getIds(myArrNames[i][1], item[0]._model.label));

});

最后，为什么不只使用 jQuery 呢？ jquey.on可以帮助将事件绑定到动态创建的项目，以便单击事件将委托给表中的任何tr元素，即使它是在您绑定事件处理程序之后添加的。

var myTable = $('.my-table');
var myArr = [[1,2,3,4,5,6,7], [1,2,3,4,5,6,7]]; //matrix of object values

myTable.on('click', 'tr', function() {
    _this.viewer.isolate(_this.modelData.getIds(myArrNames[i][1], item[0]._model.label));
});

for (var i = 0; i < myArr.length; i++) {
    myTable.append("<tr id=" + i + ">" +
        " <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 id=" + "tt" + ">" + myArr[i][7] + "</td>" +
        "</tr>");
}

参考： https://stackoverflow.com/a/15420578