2012-10-24 59 views
2

我想在SlickGrid将数据添加到数据视图和我有一个代码:数据添加到数据视图SlickGrid

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

但我只看到滚动条和列标题,但我没有看到任何数据,为什么呢?

+0

请发表您的HTML以及。你有没有为你的#myGrid元素定义宽度/高度? – njr101

回答

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

试试这个

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