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)としました。