6
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

SlickGridでマルチカラムソートを試す

Last updated at Posted at 2014-01-18

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

6
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?