slickgrid - 如何使用单个函数创建多个 slickgrids

Question

我有一个似乎无法解决的问题。我需要创建一个循环遍历数据集数组并为每个数据集创建一个独立的 slickgrids 的函数。问题是函数需要独立绑定(bind)到每个网格。例如:

// this part works fine
for(var i=0; i<domain.length; i++){
    dataView = new Slick.Data.DataView();
    grid = new Slick.Grid('#' + domain[i].name, dataView, domain[i].columns, domain[i].options);
    var data = domain[i].data;
    // this works well and I am able to create several slickgrid tables
    ... etc ...

问题是每个网格现在都称为“网格”。因此，当我绑定(bind)这样的函数时:

    // controls the higlighting of the active row
    grid.highlightActiveRow = function () {
        var currentCell;
        currentCell = this.getActiveCell();

我得到一个影响所有网格(或在某些情况下仅影响一个网格)的结果。

如何创建具有关联功能的多个独立网格？？？问题似乎是我创建了一个对象“网格”，然后使用语法 grid.xxx 分配所有函数 - 但我不知道如何在每次迭代中创建一个唯一对象。

非常感激任何的帮助。

PS:slickgrid 真是太棒了!!

谢谢

// ****** 更新 *********
@Jokob，@user700284

谢谢你们的帮助。这是我设法到达的地方:

var dataView;
function buildTable() {

for(i = 0; i<domains.length; i++){
    dataView = new Slick.Data.DataView();
    var d = domains[i];
    grid = new Slick.Grid('#' + d.name, dataView, d.columns, grids.options);
    var data = d.data;
    grid.init();
    dataView.beginUpdate();
    dataView.setItems(data);
    // dataView.setFilter(filter); -- will be reinstated once i have this working
    dataView.endUpdate();
    arrOfGrids.push(grid);
    };
};

Jakob——现在我坚持使用“for(i)”，直到我能理解你的评论——这似乎很明智。

但是，使用上述方法，网格数据不会被填充。我没有收到任何 js 错误，并且正在填充列标题，但没有填充数据。对 d.data 的引用绝对正确，因为我可以使用 Chrome js 调试器查看数据。

有任何想法吗？非常感谢您迄今为止的帮助

Answer 1

而不是将所有新网格分配给 grid (在这种情况下，每次创建新文件时都会覆盖旧文件)，将它们推送到数组中:

var arrayOfGrids = [];
for(var i=0; i<domain.length; i++) { 
    dataView = new Slick.Data.DataView();
    arrayOfGrids.push(new Slick.Grid('#' + domain[i].name, dataView, domain[i].columns, domain[i].options));
    // ....

然后，当您想对网格进行某些操作时，例如添加突出显示功能，您可以遍历数组并为每个元素执行此操作:

for ( var i=0; i<arrayOfGrids.length; i++ ) {
    arrayOfGrids[i].highlightActiveRow = function () {
        var currentCell;
        currentCell = this.getActiveCell();
        // ... etc...

奖金

当我们这样做时，我建议您使用 forEach迭代数组时数组对象上可用的方法，而不是 for 循环。与循环不同， forEach为您的变量创建一个适当的范围，它摆脱了无用的 i -迭代变量:

var arrayOfGrids = [];
domain.forEach(function(d) {
    dataView = new Slick.Data.DataView();
    arrayOfGrids.push(new Slick.Grid('#' + d.name, dataView, d.columns, d.options));
    // ....

当然，另一个循环也是如此:)