web-dev-qa-db-ja.com

SlickGrid：生データではなくDataViewを使用する簡単な例？

私はSlickGridを使用しており、Ajax呼び出しからデータをグリッドに直接バインドしています。現時点では正常に機能しており、グリッドは動的に更新されて並べ替え可能であり、1つの列にカスタムフォーマッターを使用しています。

var grid;
var columns = [{
  id: "time",
  name: "Date",
  field: "time"
},
{
  id: "rating",
  name: "Rating",
  formatter: starFormatter // custom formatter 
}
];
var options = {
  enableColumnReorder: false,
  multiColumnSort: true
};
// When user clicks button, fetch data via Ajax, and bind it to the grid. 
$('#mybutton').click(function() {
  $.getJSON(my_url, function(data) {
    grid = new Slick.Grid("#myGrid", data, columns, options);
  });
});

ただし、データの値に基づいてグリッド内の行にクラスを適用したいので、I 代わりにDataViewを使用する必要があります のように見えます。 SlickGrid wikiのDataViewの例 はかなり複雑で、あらゆる種類の追加メソッドがあります。

グリッドをソート可能のままにして、カスタムフォーマッターを引き続き使用しながら、最初とAjaxリロードの両方でdataをDataViewに単純に変換する方法を誰かが説明できますか？ （クラスを適用する方法を知る必要はありません。文字通り、DataViewの使用方法だけです。）

.getJSON呼び出し内に1行か2行余分にあることを望んでいますが、それよりも複雑になるのではないかと心配しています。

javascriptjquerydatagridslickgrid
12
flossfan

重要な点は、データソースとしてデータビューを使用してグリッドを初期化し、イベントをワイヤリングして、グリッドがデータビューの変更に応答し、最後にデータをデータビューにフィードすることです。次のようになります。

dataView = new Slick.Data.DataView();
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();
});

// When user clicks button, fetch data via Ajax, and bind it to the dataview. 
$('#mybutton').click(function() {
  $.getJSON(my_url, function(data) {
    dataView.beginUpdate();
    dataView.setItems(data);
    dataView.endUpdate();
  });
});

毎回新しいグリッドを作成する必要はなく、データをデータビューにバインドするだけであることに注意してください。

並べ替えを実装する場合は、グリッドが並べ替えイベントを受信したときに並べ替えるようにデータビューに指示する必要もあります。

grid.onSort.subscribe(function (e, args) {
  sortcol = args.sortCol.field;  // Maybe args.sortcol.field ???
  dataView.sort(comparer, args.sortAsc);
});

function comparer(a, b) {
  var x = a[sortcol], y = b[sortcol];
  return (x == y ? 0 : (x > y ? 1 : -1));
}

（この基本的な並べ替えはSlickGridの例から取られていますが、たとえばグローバル変数を使用せずに、自家製のものを実装したい場合があります）

18
njr101

以下は、dataViewを説明するのに適しています。 https://github.com/mleibman/SlickGrid/wiki/DataView

2
akif1

multiColumnSort：true ==> sortColタイプ：配列。
multiColumnSort：false ==> sortColタイプ：オブジェクト。

0
Hak-young Leem