简单 SlickGrid 的数据不显示答案

【问题标题】：Simple SlickGrid's Data not displaying简单 SlickGrid 的数据不显示
【发布时间】：2013-03-29 00:40:10
【问题描述】：

刚开始使用 SlickGrid，不确定我是否遗漏了什么，但这个简单的代码似乎不起作用。它显示标题，但不显示行。

网格代码：

var grid;
var data = [
   { ID: 1, VALUE: "Value1"},
   { ID: 2, VALUE: "Value2"},
   { ID: 3, VALUE: "Value3"},
   { ID: 4, VALUE: "Value4"},
   { ID: 5, VALUE: "Value5"}
];
var columns = [
   {name:'ID NUM', field:'ID', id:'ID'},
   {name:'VALUE', field:'VALUE', id:'VALUE'}    
];
var options = {
    enableCellNavigation: true,
    enableColumnReorder: false
};
grid = new Slick.Grid("#container-div", data, columns, options);
grid.render();

由于某种原因，只有第一行的第一个单元格在 html 中呈现并且没有显示。

HTML：

<div class="slick-viewport" style="width: 100%; overflow: auto; outline: 0px none; position: relative; height: 0px;">
   <div class="grid-canvas" style="height: 150px; width: 880px;">
      <div class="ui-widget-content slick-row even" style="top:0px">
        <div class="slick-cell l0 r0">1</div>
      </div>
   </div>
</div>

【问题讨论】：

标签： slickgrid

【解决方案1】：

您缺少用于显示数据的容器 div，在您的 javascript 代码中您引用了 #container-div，但它在您的 html 代码中不存在。通常，您不必编写任何 html 代码，就像您正在做的那样（或者它是您显示的结果？），除了网格容器本身。尝试在您的 html 正文中简单地添加或替换此代码：<div id="container-div" style="width:600px;height:500px;"></div> 您可以在此处查看 SlickGrid 的一个简单示例：https://github.com/mleibman/SlickGrid/blob/master/examples/example1-simple.html

【讨论】：