我正在尝试运行 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 页面几乎完全匹配,并且当我在example1-simple.html
文档中替换它并直接访问它时运行良好。此外,在使用 express 呈现页面时,我可以在new Slick.Grid()
调用时在浏览器中设置断点,并查看正在发送的 10 项行数据数组,但最终并未呈现。
我有基本的老式调试技能(曾几何时,我在 VB 中做过很多 Windows 编程),但我非常愿意接受有关我可以用来解决此类问题的相关调试工具和技术的建议。
这是我的 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
以及带有我的测试代码的翡翠页面:
#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);
});