4

我正在尝试运行 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);
    });
4

4 回答 4

5

我想到了。问题是我没有#fileGrid div在我的jade/html或css中的任何其他地方指定我的大小，而SlickGrids似乎假设大小为零，因此没有渲染任何行。我将翡翠声明更改为#fileGrid(style="width:500px; height:600px)并修复了它。回想起来，这确实是我的玉页面和 html 示例之间唯一不同的地方。

于 2012-04-25T14:48:28.910 回答
0

这看起来很可疑：

  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]up until data[numRows]，您应该分配到data[0]until data[numRows - 1]。

在旁注中，我会将那个for循环包裹在大括号中，即使它不是绝对必要的。此外，尾随逗号（在最后一行）将在 Internet Explorer 中中断：

  for (var i = 0 ; i < numRows ; i++) {
    data[i] = {
      fileName: "Battery test #" + i + ".csv",
      fileSize: i * 1024,
      lastUpdate: Date.now().toString()
    };
  }

您的columns作业中也有一个尾随逗号。

于 2012-04-24T16:15:27.107 回答
0

@BRValentine，你是对的。Slickgrid 网格容器元素必须指定一个高度（宽度是可选的 - 默认情况下使用 100% 可用）。如果您不提供容器元素的高度，Slickgrid 不会呈现行。

于 2012-08-17T15:22:13.073 回答
0

指定目标网格 div 尺寸解决了我的问题。这在说明中没有……我把它留在这里，以便其他人可以找到它。

<div id="classGrid" style="width:500px; height:600px;"></div>
于 2013-04-19T19:55:40.710 回答