刚开始使用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>
答案 0 :(得分:3)
您缺少容器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