Slickgrid基本示例 - 在node/express中,只加载第一行数据但不可见

Question

我正在尝试运行SlickGrid的example1-simple.html几乎没有修改过的版本.我在Mac OS X Lion上,看到与Chrome/Safari/Firefox相同的行为.一旦我拥有了所有的CSS/JS依赖项,我就可以直接加载示例HTML页面(以及我稍微修改过的版本)而不会有任何麻烦.但是,当我尝试使用node/express/jade(using 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);
    });

Answer 1

我想到了.问题是我没有#fileGrid div在我的jade/html或css中的任何其他位置指定我的大小,SlickGrids似乎假设大小为零,因此没有呈现任何行.我将玉器声明更改为#fileGrid(style="width:500px; height:600px)并修复了它.回想起来,这是我的玉页和html示例之间唯一不同的东西.