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>

サンプル HTML ページとほぼ正確に一致し、example1-simple.htmlドキュメント内で置き換えて直接アクセスすると問題なく動作するため、JavaScript は問題ないと確信しています。また、高速でページをレンダリングするときに、呼び出し時にブラウザーにブレークポイントを設定し、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

ターゲットのグリッド div ディメンションを指定すると、問題が解決しました。これは手順のどこにもありません...他の人が見つけられるようにここに残します。

<div id="classGrid" style="width:500px; height:600px;"></div>
于 2013-04-19T19:55:40.710 に答える
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]_ up untili <= numRowsに割り当てようとしていますが、 untilに割り当てる必要があります。data[-1]data[numRows]data[0]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 に答える