0

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

1 に答える 1

0

コードをもう一度見直しましたが、エラーは見つかりませんでした。

しかし、このコードは 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();
});
于 2013-06-09T23:29:12.257 に答える