Question

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

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

Answer 1

今天我试图实现同样的目标。我已经浏览了SlickGrid代码，但没有找到任何重置＆＃39;重置＆＃39;功能。所以，我已经稍微调整了 slick.grid.js v2.2。

基本上你只需要添加一个新阵列 - ＆＃39; latestSortColumns＆＃39;它将存储排序列状态（内部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＆＃34; locus＆＃34;。

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

表格总是会按某种顺序在某个列上排序吗？

如果没有，那么在第一次点击一列时你将不得不存储很多状态，以防你想在第三次点击后恢复它。

第3次单击时，列排序重置升序/降序

3 个答案: