SlickGridを使ってみるの続きです。
本家ではSlickGrid example: Multi Column Sortにマルチカラムソートの例があります。
私が書いたサンプルのコードは
https://github.com/hnakamur/slickgrid_example/tree/90eed7cda7a59f0b96dbb65ed9ff966f57068774
にあります。
マルチカラムソートを使う場合は、
Grid Options · mleibman/SlickGrid WikiのmultiColumnSortをtrueに指定します。
var options = {
editable: true,
multiColumnSort: true
};
var dataView = new Slick.Data.DataView();
var grid = new Slick.Grid("#myGrid", dataView, columns, options);
grid.init();
またgrid.onSortにソートする関数を設定します。
grid.onSort.subscribe(function (e, args) {
var cols = args.sortCols;
dataView.sort(function (dataRow1, dataRow2) {
for (var i = 0, l = cols.length; i < l; i++) {
var field = cols[i].sortCol.field;
var sign = cols[i].sortAsc ? 1 : -1;
var value1 = dataRow1[field], value2 = dataRow2[field];
var result = (value1 == value2 ? 0 : (value1 > value2 ? 1 : -1)) * sign;
if (result != 0) {
return result;
}
}
return 0;
});
});
dataView.onRowCountChanged.subscribe(function (e, args) {
grid.updateRowCount();
grid.render();
});
dataView.onRowsChanged.subscribe(function (e, args) {
grid.invalidateRows(args.rows);
grid.render();
});
dataView.beginUpdate();
dataView.setItems(data, "cid");
dataView.endUpdate();
列ヘッダーをクリックし、2つ目以降はShift+左クリックすることで複数の列でソートできます。同じ列をShift+左クリックすれば、ソートの昇順、降順を切り替えられます。
また、ソートキーに追加済みの列ヘッダーをCtrl+左クリック(Macの場合はCommand+左クリック)するとソートキーから除外できます。
DataViewについて
このサンプルではDataView · mleibman/SlickGrid Wikiを使用しています。
基本的な使い方ではJavaScriptの行データの配列を直接グリッドに指定することも出来ますが、ページングなどを行う場合は行データの配列をDataViewにラッピングしてからグリッドに指定する必要があります。
いちいち使い分けるのも面倒なので、このサンプル以降は常にDataViewを使用します。
DataView · mleibman/SlickGrid Wikiに説明がありますが、
One important requirement that DataView imposes on the data it consumes is that every item has a unique identifier.
DataViewに渡す行データにはユニークなIDのフィールドを含める必要があります。デフォルトではid
になっていますが、DataViewのsetItems(data, [objectIdProperty])
メソッドで名前を指定すれば変更できます。
サーバサイドにRailsを使う場合を想定するとid
はサーバサイドで使いたいので、Backbone.jsの流儀を参考にして、この例ではcid
(client側のid)としました。