SlickGrid endUpdate 不起作用

Question

我查看了 SlickGrid wiki 给出的示例以及在 stackoverflow 上进行了搜索，但我无法找到解决问题的方法。我正在尝试显示有关我使用 SlickGrid 从 Twitter API 接收到的推文的随机数据。

在我的脚本中，网格和数据视图似乎在我调用 beginUpdate() 后进行了初始化，但是，脚本似乎在 endUpdate() 上崩溃了。这是我的代码：

function TweetGrid(){
    this.dataView = new Slick.Data.DataView();
    this.grid = this.initGrid();

    this.dataView.onRowCountChanged.subscribe(function(e, args){
        grid.updateRowCount();
        grid.render();
    });

    this.dataView.onRowsChanged.subscribe(function(e, args){
        grid.invalidateRows(args.rows);
        grid.render();
    });

    //dummy value for testing
    var data = [{ id: "id_1", Time: "11:11:11", PictureUrl: "someimageurl", Name: "name", ScreenName: "screen name", Text: "some tweet" }];

    this.dataView.beginUpdate();
    alert("Begin Update"); //this gets called
    this.dataView.setItems(data); 
    alert("Set items"); //this gets called
    this.dataView.endUpdate();
    alert("End Update"); //this DOES NOT get called - script does not move on
    this.dataView.render();
    alert("data rendered");
}

TweetGrid.prototype.initGrid = function(){
    var columns = [
        {
            id: "Time", name: "Time", field: "Time", cssClass: "custom-column"
        },
        {
            id: "PictureUrl", name: "Picture", field: "PictureUrl", cssClass: "custom-column"
        },
        {
            id: "Name", name: "Name", field: "Name", cssClass: "custom-column"
        },
        {
            id: "ScreenName", name: "Screen Name", field: "ScreenName", cssClass: "custom-column"
        },
        {
            id: "Text", name: "Tweet", field: "Text", cssClass: "custom-column"
        }
    ];

    var options = {
        enableCellNavigation: true,
        forceFitColumns: true,
        enableColumnReorder: false
    };

    return new Slick.Grid("#tweetGrid", this.dataView, columns, options);
}

Answer 1

我再次检查了您的代码，但没有发现错误。

但是这个代码在一个函数中运行良好。

    var dataView = new Slick.Data.DataView();

var columns = [
    {
        id: "Time", name: "Time", field: "Time", cssClass: "custom-column"
    },
    {
        id: "PictureUrl", name: "Picture", field: "PictureUrl", cssClass: "custom-column"
    },
    {
        id: "Name", name: "Name", field: "Name", cssClass: "custom-column"
    },
    {
        id: "ScreenName", name: "Screen Name", field: "ScreenName", cssClass: "custom-column"
    },
    {
        id: "Text", name: "Tweet", field: "Text", cssClass: "custom-column"
    }
];

var options = {
    enableCellNavigation: true,
    forceFitColumns: true,
    enableColumnReorder: false
};

var grid = new Slick.Grid("#tweetGrid", dataView, columns, options);

var data = [{ id: "id_1", Time: "11:11:11", PictureUrl: "someimageurl", Name: "name", ScreenName: "screen name", Text: "some tweet" }];

dataView.beginUpdate();
dataView.setItems(data); 
dataView.endUpdate();
grid.render();

dataView.onRowCountChanged.subscribe(function (e, args) {
    grid.updateRowCount();
    grid.render();
});

dataView.onRowsChanged.subscribe(function (e, args) {
    grid.invalidateRows(args.rows);
    grid.render();
});