第三次单击时按升序/降序重置列排序

Question

假设我们有一个带有可排序列的网格。

如果用户单击某列，它将按“asc”排序，然后如果用户再次单击列标题，它将按“desc”排序，现在当用户第三次单击该列时，我想要类似的功能，排序被删除，即返回到以前的样式，CSS 更改回正常/非斜体等？

Answer 1

今天我试图实现同样的目标。我浏览了 SlickGrid 代码，但没有找到任何“重置”功能。因此，我对 slick.grid.js v2.2 进行了一些调整。

基本上，您只需要添加一个新数组 - “latestSortColumns”，它将存储排序列状态（内部 SlickGrid sortColumns 数组的深层副本）。

var latestSortColumns = [];

（可选）添加新设置以选择加入排序重置。

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

更改 setupColumnSort 以在第三次单击列标题后重置排序。

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 2

我调用此函数将所有列重置回原始顺序。

它要求将其中一列设置为不可排序。
在下面的示例中，我使用表的第一列 columns[0]，其字段 ID 为“locus”。

function removeSorting() {
  columns[0].sortable = true;
  $('.slick-header-columns').children().eq(0).trigger('click');
  columns[0].sortable = false;
  // clear other sort columns
  grid.setSortColumns( new Array() );
}

然后在典型的 dataView.sort() 函数中，您对此列进行例外处理：

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;
  });
});

Answer 3

表是否总是在某些列上按某种顺序排序？

如果没有，那么您必须在第一次单击列时存储大量状态，以防您想在第三次单击后恢复它。