SMART datagrid :: Column Sorting

Column Sorting Example 準備中...

カラムヘッダーをクリックしたり、GridBase.orderByメソッドを呼び出してカラム毎にソーティングすることができるが。ユーザーがカラムヘッダーをクリックしてデータをソーティングするためにはまずGridBase.operateOptionsでソーティングができるように設定しなければならない。メソッドの呼び出しを利用したソーティングはプロパティーとは無関係である。

Code -1

    function (ev) {
        grdMain.operateOptions().setSortingEnabled(ev.target.value);
    }

グリッとの程度でソーティングが可能な状態でも DataColumn.sortableプロパティーを通してカラム毎にユーザーがソーティングすることができるかを設定することもできる。下の"Change Column Sortable"ボタンをクリックすると今選択されたカラムのソーティングの可否を交互に設定する。

Code -2

    function (ev) {
        var column = grdMain.focusedIndex().column;
        if (column instanceof DataLudi.DataColumn) {
            column.setSortable(!column.sortable());
            // soratableがfalseなら背景色を違って設定
            // stylesは次のサンプルで
            column.styles().setBackground(column.sortable() ? '#fff' : '#10000000');
        }
    }

Sorting Enabled

Grid - 1

rows

Sort Style:

実際にソーティングはカラム単位ではなくカラムに繋がれたデータフィールドを基準に実行させる。一つ以上の以上のフィールドでソーティングもできる。この場合先にソーティングされたフィールドの値の順番を保ったまま追加されるフィールドがソーティングされる。

sortStyleプロパティーをSortStyle.INCLUSIVEをtrueで指定すれば複数のソーティングができる。上のSort Style選択ボックスで確認する。

Code -3

    function (ev) {
        grdMain.operateOptions().setSortStyle(ev.target.value);
    }

SortStyle.REVERSEは後にクリックしたフィールドを先にソーティングする方式である。ソースを見る

See Also: GridBase.orderBy; operateOptions; DataColumn.sortable; SortStyle; OperateOptions.sortingEnabled; DataField