将数据添加到 DataView SlickGrid答案

【问题标题】：Add data to DataView SlickGrid将数据添加到 DataView SlickGrid
【发布时间】：2012-10-24 09:33:22
【问题描述】：

我想将数据添加到 SlickGrid 中的 DataView 并且我有一个代码：

var columns = [
               {id: "title", name: "Title", field: "title"},
               {id: "duration", name: "Duration", field: "duration"},
               {id: "%", name: "% Complete", field: "percentComplete"},
               {id: "start", name: "Start", field: "start"},
               {id: "finish", name: "Finish", field: "finish"},
               {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
             ];    

$(document).ready(function() {
        for (var i = 0; i < 200; i++) {
              data[i] = {
                id: "id_" + i,
                title: "Task " + i,
                duration: "5 days",
                percentComplete: Math.round(Math.random() * 100),
                start: "01/01/2009",
                finish: "01/05/2009",
                effortDriven: (i % 5 == 0)
              };
            }

        dataView = new Slick.Data.DataView({ inlineFilters: true });
        grid = new Slick.Grid("#myGrid", dataView, columns, options);
        dataView.beginUpdate();
        dataView.setItems(data);
        dataView.setFilter(filter);
        dataView.endUpdate();
    });

但是我只看到滚动条和列标题，却没有看到任何数据，为什么？

【问题讨论】：

请同时发布您的 HTML。您是否为 #myGrid 元素定义了宽度/高度？

标签： slickgrid

【解决方案1】：

试试这个，

var columns = [
               {id: "title", name: "Title", field: "title"},
               {id: "duration", name: "Duration", field: "duration"},
               {id: "%", name: "% Complete", field: "percentComplete"},
               {id: "start", name: "Start", field: "start"},
               {id: "finish", name: "Finish", field: "finish"},
               {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
             ];    

$(document).ready(function() {
        for (var i = 0; i < 200; i++) {
              data[i] = {
                id: "id_" + i,
                title: "Task " + i,
                duration: "5 days",
                percentComplete: Math.round(Math.random() * 100),
                start: "01/01/2009",
                finish: "01/05/2009",
                effortDriven: (i % 5 == 0)
              };
            }

        dataView = new Slick.Data.DataView({ inlineFilters: true });
        grid = new Slick.Grid("#myGrid", dataView, columns, options);
        dataView.beginUpdate();
        dataView.setItems(data);
        dataView.setFilter(filter);
        dataView.endUpdate();
        dataView.render(); //You missed this rendering part. this should work now.
    });

【讨论】：

【解决方案2】：

试试这个

var data = [];
var options = {};
var columns = [
        {id: "title", name: "Title", field: "title"},
        {id: "duration", name: "Duration", field: "duration"},
        {id: "%", name: "% Complete", field: "percentComplete"},
        {id: "start", name: "Start", field: "start"},
        {id: "finish", name: "Finish", field: "finish"},
        {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
     ];    

$(document).ready(function() {
    for (var i = 0; i < 200; i++) {
        data[i] = {
            id: "id_" + i,
            title: "Task " + i,
            duration: "5 days",
            percentComplete: Math.round(Math.random() * 100),
            start: "01/01/2009",
            finish: "01/05/2009",
            effortDriven: (i % 5 == 0)
        };
    }

    dataView = new Slick.Data.DataView({ inlineFilters: true });
    dataView.beginUpdate();
    dataView.setItems(data);
    dataView.endUpdate();

    grid = new Slick.Grid("#myGrid", dataView, columns, options);
});

【讨论】：