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”然后使用语法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);
    };
};

雅各布 - 现在我坚持“为（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));
    // ....

然后对于另一个循环当然相同：）

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);
    };
};

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

3 个答案: