3回目のクリックで昇順/降順の列ソートのリセット

Question

ソート可能な列を持つグリッドがあるとします。

ユーザーが列をクリックすると「asc」でソートされ、ユーザーが列ヘッダーを再度クリックすると「desc」でソートされます。ユーザーが3番目の列をクリックすると同様の機能が必要になります時間は、並べ替えが削除され、つまり、以前のスタイルに戻って、CSSは、通常/非イタリックなどに戻って変更されますか？

Answer 1

テーブルは常にいくつかの列で何らかの順序でソートされますか？

もしそうでなければ、3回目のクリック後に復元する場合に備えて、最初に列をクリックしたときに多くの状態を保存する必要があります。

Answer 2

今日私は同じことを達成しようとしていました。私はSlickGridコードをスキミングしましたが、「リセット」機能は見つかりませんでした。だから、私はslick.grid.js v2.2を微調整しました。

基本的には、ソート列の状態（内部SlickGrid sortColumns配列のディープコピー）を格納する新しい配列 'latestSortColumns'を追加するだけです。

var latestSortColumns = []; 

オプションで、ソートリセットのオプトインに新しい設定を追加します。

var defaults = { 
    (...), 
    autoResetColumnSort: false 
}; 

setupColumnSortを変更して、列のヘッダーを3回クリックした後にソートをリセットします。

function setupColumnSort() { 
    $headers.click(function (e) { 
    // temporary workaround for a bug in jQuery 1.7.1 (http://bugs.jquery.com/ticket/11328) 
    e.metaKey = e.metaKey || e.ctrlKey; 

    if ($(e.target).hasClass("slick-resizable-handle")) { 
     return; 
    } 

    var $col = $(e.target).closest(".slick-header-column"); 
    if (!$col.length) { 
     return; 
    } 

    var column = $col.data("column"); 
    if (column.sortable) { 
     if (!getEditorLock().commitCurrentEdit()) { 
     return; 
     } 

     var sortOpts = null; 
     var i = 0; 
     for (; i < sortColumns.length; i++) { 
     if (sortColumns[i].columnId == column.id) { 
      sortOpts = sortColumns[i]; 
      sortOpts.sortAsc = !sortOpts.sortAsc; 
      break; 
     } 
     } 

     **if ((e.metaKey || (options.autoResetColumnSort && latestSortColumns[i] != null && latestSortColumns[i].sortAsc === !column.defaultSortAsc)) && options.multiColumnSort) {** 
     if (sortOpts) { 
      sortColumns.splice(i, 1); 
      **latestSortColumns.splice(i, 1);** 
     } 
     } 
     else { 
     if ((!e.shiftKey && !e.metaKey) || !options.multiColumnSort) { 
      sortColumns = []; 
     } 

     if (!sortOpts) { 
      sortOpts = { columnId: column.id, sortAsc: column.defaultSortAsc }; 
      sortColumns.push(sortOpts); 
     } else if (sortColumns.length == 0) { 
      sortColumns.push(sortOpts); 
     } 
     } 

     setSortColumns(sortColumns); 

     if (!options.multiColumnSort) { 
     trigger(self.onSort, { 
      multiColumnSort: false, 
      sortCol: column, 
      sortAsc: sortOpts.sortAsc}, e); 
     } else { 
     trigger(self.onSort, { 
      multiColumnSort: true, 
      sortCols: $.map(sortColumns, function(col) { 
      return {sortCol: columns[getColumnIndex(col.columnId)], sortAsc: col.sortAsc }; 
      })}, e); 
     } 
    } 
    }); 
} 

ストアの新しい状態latestSortColumns内のすべてのソート変更後：

function setSortColumns(cols) { 
    sortColumns = cols; 

    var headerColumnEls = $headers.children(); 
    headerColumnEls 
     .removeClass("slick-header-column-sorted") 
     .find(".slick-sort-indicator") 
      .removeClass("slick-sort-indicator-asc slick-sort-indicator-desc"); 

    $.each(sortColumns, function(i, col) { 
    if (col.sortAsc == null) { 
     col.sortAsc = true; 
    } 
    var columnIndex = getColumnIndex(col.columnId); 
    if (columnIndex != null) { 
     headerColumnEls.eq(columnIndex) 
      .addClass("slick-header-column-sorted") 
      .find(".slick-sort-indicator") 
       .addClass(col.sortAsc ? "slick-sort-indicator-asc" : "slick-sort-indicator-desc"); 
    } 
    }); 

    **for (var i = 0; i < sortColumns.length; i++) 
     latestSortColumns[i] = { columnId: sortColumns[i].columnId, sortAsc: sortColumns[i].sortAsc };** 
} 

すべてです、今動作するはずです。

Answer 3

これは、すべての列を元の順序に戻すために呼び出す関数です。

列の1つがソート可能ではないと設定する必要があります。 以下の例では、テーブルの最初の列である列[0]を使用します。列にはフィールドID "locus"があります。

grid.onSort.subscribe(function(e,args) { 
    var cols = args.sortCols; 
    dataView.sort(function (dataRow1, dataRow2) { 
    for(var i = 0; i < cols.length; i++) { 
     var field = cols[i].sortCol.field; 
     // reset sorting to original indexing 
     if(field === 'locus') { 
     return (dataRow1.id > dataRow2.id) ? 1 : -1; 
     } 
     var value1 = dataRow1[field]; 
     var value2 = dataRow2[field]; 
     if(value1 == value2) continue; 
     var sign = cols[i].sortAsc ? 1 : -1; 
     return (value1 > value2) ? sign : -sign; 
    } 
    return 0; 
    }); 
});