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

Question

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

// 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 ...

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

    // 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-iteration 变量：

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

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

Answer 2

您可以尝试将每个网格实例添加到一个数组中。如果您愿意，可以通过<arrray>[<array-index>] 以不同方式处理每个网格

var gridArr = [];
// this part works fine
for(var i=0; i<domain.length; i++){
    dataView = new Slick.Data.DataView();
    var 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 ...
gridArr.push(grid)

然后如果你说gridArr[0]你可以访问第一个网格，gridArr[1]第二个网格等等。

Answer 3

以防万一其他人关注这个问题 - 这是有效的解决方案：

非常感谢@Jokob 和@user700284

// default filter function
function filter(item) {
    return true; // this is just a placeholder for now
}

var dataView;
function buildTables() {

    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, options);
        var data = d.data;

        grid.init();
        dataView.beginUpdate();
        dataView.setItems(data);
        dataView.setFilter(filter);
        dataView.endUpdate();
        grid.invalidate();
        grid.render();

        arrOfGrids.push(grid);
    };
};