18

SlickGrid を使い始めたのですが、Data View と Grid (編集可能) の違いに戸惑いました。そこに言及されていますが、データビューに関するいくつかの議論をドキュメントで見つけていません。

教えてください。

4

3 に答える 3

29

非常に簡単に言えば、次の 3 つのレイヤーを考えてみてください。

  Grid
  ----
DataView
  ----
  Data

下部に生データがあります。これは単なる古い配列です。配列内の各項目は、1 行のデータを表します (グリッド内で 1 行として表示されます)。

DataView はデータ配列を読み取り、いくつかの標準メソッドを公開することでグリッドで使用できるようにします。このように、グリッドが表示目的でデータを取得したい場合、標準的な方法の 1 つを介してデータビューと通信するだけです。

Grid は表示コンポーネントです。その唯一の責任は、必要な出力を画面に表示するために必要な HTML コードをレンダリングすることです。

グリッドがデータに直接アクセスすることはありません。データビューとのみ対話します。これにより、データビューは、データをグリッドに返すときに、グループ見出しを表すために使用される「ファントム」行を配信するなどのトリックを実行できます。

興味があれば、以下の例は、SlickGrid でデータビューを使用する、考えられる最も単純な例です。

var data = [
  { title: "Primer",       rating: "A" },
  { title: "Matrix",       rating: "B" },
  { title: "Transformers", rating: "C" },
];
var columns = [
  { id: "title",  name: "Title",  field: "title" },
  { id: "rating", name: "Rating", field: "rating" }
];
var options = {
  enableColumnReorder: false  // ... whatever grid options you need
};

var dataView = new Slick.Data.DataView();
var grid = new Slick.Grid("#myGrid", dataView, columns, options);

// wire up model events to drive the grid
dataView.onRowCountChanged.subscribe(function (e, args) {
  grid.updateRowCount();
  grid.render();
});
dataView.onRowsChanged.subscribe(function (e, args) {
  grid.invalidateRows(args.rows);
  grid.render();
});

// Feed the data into the dataview
dataView.setItems(data);
于 2012-08-28T07:43:42.923 に答える
12

DataView は、データ ソース上の抽象化です。すべてのデータがクライアントで (つまり Javascript 配列で) 利用可能な場合、DataView はグリッド自体にない多くの便利な機能を提供できます。(グリッドにこれらの機能がないという事実は、設計によるものです。SlickGrid は、API でモジュール設計とデータ抽象化を促進しながら、コアをスリムでシンプルに保つように努めています。)

DataView は、データを取り込み、元のデータ配列の代わりに SlickGrid に渡すことができるデータ プロバイダーとして機能することで機能します。たとえば、DataView グループ データを作成すると、グリッドは「グループ」行が単なる通常のデータ項目であると見なされるため、グリッドはそれらを認識する必要がありません。DataView は、これらの項目にカスタムの表示と動作があることをグリッドに伝え、両方の実装を提供します。次に、DataView の onRowCountChanged および onRowsChanged イベントを接続して、グリッドを更新すると出来上がりです。

以下は、DataView がグリッドに追加する機能の大まかなリストです。

  • ページング。
  • 並べ替え。
  • 探す。
  • 合計によるグループ化。
  • グループを展開/折りたたみます。
于 2012-08-28T02:25:58.377 に答える
1

DataView を使用すると、データやグリッドを変更せずに、データの並べ替えとフィルター処理を行うことができます。ビュー関連の機能を提供するグリッド上のオーバーレイと考えることができます - 場合によってはこれらの機能を強化します。

それが役立つことを願っています!

于 2012-08-27T13:40:46.287 に答える