2

我有一个似乎无法解决的问题。我需要创建一个循环遍历数据集数组并为每个数据集创建一个独立的 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 调试器查看数据。

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

4

3 回答 3

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

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

于 2013-07-12T08:14:10.383 回答
1

您可以尝试将每个网格实例添加到数组中。如果需要，您将能够以不同方式处理每个网格，方法是<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]第二个网格等等。

于 2013-07-12T08:16:43.553 回答
1

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

非常感谢@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);
    };
};
于 2013-07-12T15:48:44.830 回答