Slickgrid基本示例 – 在node / express中，只加载第一行数据，但不可见
我试图运行一个几乎没有修改的SlickGrid的example1-simple.html版本。 我在Mac OS X Lion上看到了与Chrome / Safari / Firefox相同的行为。 一旦我拥有了所有的CSS / JS依赖关系，我可以直接加载示例HTML页面（以及我稍微修改过的版本），而不会有任何麻烦。 但是，当我尝试基本上与node / express / jade（使用res.render() ）相同的页面，加载标题（列名称）行，并通过查看呈现的HTML，我可以看到我的数据的第一行加载，但我没有看到它在浏览器（我试图加载10行数据）。 所有相关的CSS / JS文件似乎正在加载，我没有看到在浏览器控制台或我的节点控制台中的任何错误。 我已经复制了下面的整个grid-canvas div 。
<div class="grid-canvas" style="height: 250px; width: 240px; "> <div class="ui-widget-content slick-row even" row="0" style="top:0px"> <div class="slick-cell l0 r0">Battery test #1.csv</div> <div class="slick-cell l1 r1">1024</div> <div class="slick-cell l2 r2">1335237255112</div> </div> </div>
我很确定JavaScript是正确的，因为它几乎完全匹配示例HTML页面，并且在我将其replace为example1-simple.html文档并直接访问它时运行良好。 另外，当使用express来呈现页面时，我可以在new Slick.Grid()调用中的浏览器中设置一个断点，并看到行数据的10个数组正在发送，而不是最终呈现。
我有基本的老debugging技能（曾经，我在VB中做了很多Windows编程），但是我很乐意提供相关的debugging工具和技术的build议，可以解决这类问题。
这是我的layout.jade：
!!! html head title= title link(rel="stylesheet", href="/stylesheets/slick.grid.css", type="text/css") link(rel="stylesheet", href="/stylesheets/css/smoothness/jquery-ui-1.8.19.custom.css", type="text/css") body!= body
和我的testing代码的玉页：
#content #fileGrid script(src="/javascripts/lib/jquery-1.7.2.js") script(src="/javascripts/lib/jquery.event.drag-2.0.min.js") script(src="/javascripts/lib/slick.core.js") script(src="/javascripts/lib/slick.grid.js") script var grid; var columns = [ {id: "fileName", name: "File Name", field: "fileName"}, {id: "fileSize", name: "File Size", field: "fileSize"}, {id: "lastUpdate", name: "Last Updated", field: "lastUpdate"} // use mtime ]; var options = { enableCellNavigation: true, enableColumnReorder: false }; $(function() { var timeStamp = new Date(); var numRows = 10; var data = []; for (var i = 1 ; i <= numRows ; i++) { data[i-1] = { fileName: "Battery test #" + i + ".csv", fileSize: i * 1024, lastUpdate: Date.now().toString() } }; grid = new Slick.Grid("#fileGrid", data, columns, options); });
我想到了。 问题是我没有为我的#fileGrid div在我的jade / html或css中的任何其他地方指定大小，SlickGrids似乎认为大小为零，因此没有渲染任何行。 我把这个jade的声明改成了#fileGrid(style="width:500px; height:600px) ，并且修正了这个问题。回想起来，这是我的玉页和html的唯一不同之处。
这看起来很可疑：
for (var i = 0 ; i <= numRows ; i++) data[i-1] = { fileName: "Battery test #" + i + ".csv", fileSize: i * 1024, lastUpdate: Date.now().toString(), };
为什么data[i-1]和i <= numRows ？ 您正在尝试将data[-1]分配到data[-1] data[numRows] ，在data[numRows - 1]之前您应该将data[0]分配给data[0] data[numRows - 1] 。
在一个侧面说明中，我会将它for在大括号中，尽pipe这不是绝对必要的。 另外，最后一行的尾部逗号将在Internet Explorer中中断：
for (var i = 0 ; i < numRows ; i++) { data[i] = { fileName: "Battery test #" + i + ".csv", fileSize: i * 1024, lastUpdate: Date.now().toString() }; }
您的columns分配中也有一个尾随的逗号。
@ BRValentine，你是对的。 Slickgrid网格容器元素必须被赋予一个高度（宽度是可选的 – 默认情况下使用100％可用）。 如果您没有为容器元素提供高度，则Slickgrid不会呈现行。
指定目标网格div尺寸解决了我的问题。 这是没有任何指示…我留在这里，让别人可以find它。
<div id="classGrid" style="width:500px; height:600px;"></div>