1

テンプレートとして example1_simple ( http://mleibman.github.com/SlickGrid/examples/example1-simple.htmlにあります) を使用して SlickGrid を使用して単純な編集可能なテーブルを実装しようとしていますが、ひどく間違っています。

私のグリッドは、幅が 280 ピクセルで、3 つの列 (id、X、Y) を持つフォームのタブ内に収まる必要があります。IDは自動インクリメントされ、xとyは空白になりますが、テストのために、各セルに徐々に長くなる文字列を入れているので、最初の行では0、a、bを読み取り、2番目の行には1、aa、bbが含まれますただし、各セルは前のセルの下に描画されているため、行 1 には「0」が含まれ、行 2 には「1」と「a」が重ねて表示され、行 3 には「2」、「aa」、および「aa」が含まれます。 「b」など。私は一時的に私のウェブサイトhttp://www.nutanageophysics.com/IFP/test.htmlに載せたので、誰でも見ることができます。(簡単な補足質問 - このようなライブの例を保存する最善の方法は何ですか?)

ここに私のテストhtmlファイルがあります

<!DOCTYPE html>
<html>
  <head>
    <title>Nutana Project Planner</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/jquery-ui-1.8.16.custom.css" type="text/css"/>
    <script src="js/jquery-1.7.min.js"></script>
    <script src="js/jquery.event.drag-2.0.min.js"></script>
    <script src="js/slick.core.js"></script>
    <script src="js/slick.grid.js"></script>
    <script src="js/xyGrid.js"></script>

    <script type="text/javascript">

      var xyGrid;

      function initialize() {
        xyGrid = new Slick.Grid("#xyGrid", data, columns, options);
      }
    </script>
  </head>
  <body onload="initialize();">
    <div id=xyGrid >
        <!-- the grid is going to be placed here by onLoadXML -->
    </div>
</body>
</html>

私の SlickGrid コードは xyGrid.js にあり、ここに含まれています:

  var data = [];
  var columns = [
    {id: "id", name: "id", field: "id"},
    {id: "x1", name: "X", field: "x1"},
    {id: "y1", name: "Y", field: "y1"},
  ];

   var options = {
      enableCellNavigation: true,
      enableColumnReorder: false,
  };

  $(function () {
      var a='a';
      var b='b';
    for (var i = 0; i < 10; i++) {
      data[i] = {
        id:  i,
        x1: a,
        y1: b,
      };
      a +="a";
      b += "b";
    }

  })

他に考えられる唯一の関連することは、css で xyGrid のスタイルを次のように定義したことです。

  #xyGrid {
   width: 280px;
   height: 500px;
  }

幅を変更してみましたが、効果がありません。他の関連するすべての css は、私が触れていない jquery.ui.css にあります。また、さまざまな Grid オプションを試してみましたが失敗しましたが、ここで使用した 2 つは例で使用したものです。例のように div の周りにテーブルも作成しましたが、他の目的でテーブルを使用していたため、関係ありません。

助けてください。

ありがとう、

マルク・ペルティエ

4

1 に答える 1

3

スタイルシートが不足していると思います： http://mleibman.github.com/SlickGrid/slick.grid.css

ローカルで再作成しましたが、それが含まれていても問題ないようです。元の例に含まれているすべてのシートとスクリプトがあることを再確認してください。

(いくつかのサンプル コードにjsfiddle.netを使用できます。これらすべてに対応できるかどうかはわかりません!)

于 2012-04-18T22:25:33.503 に答える