12

私は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);
  });
});

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

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

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

4

3 に答える 3

20

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

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の例から取られていますが、たとえばグローバル変数を使用せずに、自家製のものを実装したい場合があります）

于 2012-07-23T11:19:24.463 に答える
2

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

于 2013-07-24T22:09:37.713 に答える
0

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

于 2014-09-11T07:31:47.907 に答える