0

私の最初の SlickGrid の例を見ていきます。列名を示すヘッダー行が単純にテーブル自体を通過するというこの問題が発生します。

不正行為を示すスクリーンショットを添付しています。列名が表示されるヘッダーの長さに注意してください。

ここに画像の説明を入力 私のコードは以下です。助けてください。

<html>
<head>
        <link rel="stylesheet" href="./slick/slick.grid.css" type="text/css"/>
        <link rel="stylesheet" href="./slick/examples/examples.css" type="text/css"/>

    <script src="./slick/lib/jquery-1.7.min.js"></script>
    <script src="./slick/lib/jquery-ui-1.8.16.custom.min.js"></script>
    <script src="./slick/lib/jquery.event.drag-2.0.min.js"></script>

    <script src="./slick/slick.editors.js"></script>
    <script src="./slick/slick.core.js"></script>
    <script src="./slick/slick.grid.js"></script>
 </head>

<body>
<div id="container"></div>

<script>

     var grid,
      data = [],
      columns = [
        { id: "col1", name: "Col1", field: "col1"},
        { id: "col2", name: "Col2", field: "col2" },
        { id: "col3", name: "Col3", field: "col3" },
        { id: "col4", name: "Col4", field: "col4" },
        { id: "col5", name: "Col5", field: "col5" },
        { id: "col6", name: "Col6", field: "col6" }
      ],
      options = {
        editable: false,
        enableAddRow: true,
        enableCellNavigation: false,
        autoHeight: true
      };
  for (var i = 5; i-- > 0;) {
        data[i] = {
          col1: "",
          col2: "",
          col3: "",
          col4: "",
      col5: "",
      col6: ""
    };
  }
  grid = new Slick.Grid("#container", data, columns, options);  
</script>

</body>
</html>
4

1 に答える 1

0

div コンテナーの幅をテーブルの正確な幅に設定すると、問題が解決します。

<div id="container" style="width:480px;"></div>
于 2012-12-30T17:11:32.297 に答える