您可以在 SlickGird 中使用分组对多列进行排序吗？答案

【问题标题】：Can you sort multiple columns with a grouping in SlickGird?您可以在 SlickGird 中使用分组对多列进行排序吗？
【发布时间】：2015-02-12 20:54:52
【问题描述】：

所以我的问题很基本，但我的谷歌搜索显示的答案很少。所以我来到stackoverflow社区，是否可以在slickgrid中对列进行分组排序，然后在不删除分组的情况下对其他列进行排序？

例如，有一个包含 State、City、Zip 列的表。我对 State 进行了分组，以便为每个州提供可折叠的组。现在是否可以对 City 和/或 Zip 列进行排序，以便每个分组状态中的行按所需方向排序？

【问题讨论】：

标签： javascript jquery slickgrid

【解决方案1】：

您需要启用multi-column sorting 并为需要排序的每一列提供sortable column option。

注意：您需要使用shift-click 来实际执行多列排序。

对于您的示例描述的结果：

点击以按州对数据进行分组
单击状态列标题对其进行排序
按住 Shift 键并单击任何其他列以更改其排序顺序

<html>
  <link rel="stylesheet" type="text/css" href="http://mleibman.github.io/SlickGrid/slick.grid.css">
  <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>

  <script src="http://mleibman.github.io/SlickGrid/slick.dataview.js"></script>
  <script src='http://mleibman.github.io/SlickGrid/lib/jquery.event.drag-2.2.js'></script>
  <script src='http://mleibman.github.io/SlickGrid/slick.core.js'></script>
  <script src='http://mleibman.github.io/SlickGrid/slick.grid.js'></script>
  <script src='http://mleibman.github.io/SlickGrid/slick.groupitemmetadataprovider.js'></script>

  <button id='group' type='button'>Group by State</button>
  <button id='clearGrouping' type='button'>Clear grouping</button>

  <div id="myGrid" style="width:600px;height:500px;"></div>

  <script>
    var dataView = new Slick.Data.DataView();
    $('#clearGrouping').click(function() {
      dataView.setGrouping([])
    })

    $("#group").click(function() {
      dataView.setGrouping({
        getter: "state",
        formatter: function(g) {
          return "" + g.value + " <span style='color:green'>(" + g.count + " items)</span>";
        },
        aggregateCollapsed: false,
        lazyTotalsCalculation: true
      });

       
    });

    var columns = [
      {id: "column1", name: "State", field: "state", sortable: true},
      {id: "column2", name: "City", field: "city", sortable: true},
      {id: "column3", name: "Zip", field: "zip", sortable: true}
    ];

    var options = {
      enableCellNavigation: true,
      editable: true,
      forceFitColumns: true,
      multiColumnSort: true
    };

    var grid = new Slick.Grid('#myGrid', dataView, columns, options);

    dataView.onRowCountChanged.subscribe(function(e, args) {
      grid.updateRowCount();
      grid.render();
    });

    dataView.onRowsChanged.subscribe(function(e, args) {
      grid.invalidateRows(args.rows);
      grid.render();
    });

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

    var data = [
      {state: 'CA', city: 'Los Angeles', zip: '90014'},
      {state: 'CA', city: 'Santa Monica', zip: '90401'},
      {state: 'CA', city: 'Napa', zip: '94558'},
      {state: 'NY', city: 'Manhattan', zip: '10001'},
      {state: 'NY', city: 'Buffalo', zip: '14201'},
      {state: 'HI', city: 'Hilo', zip: '96720'},
      {state: 'HI', city: 'Hawi', zip: '96719'},
    ]

    dataView.setItems(data, 'zip');

  </script>
</html>

【讨论】：

【解决方案2】：

正如其他评论中所述，请确保您已启用多列排序，并且您希望能够排序的列具有可排序列选项。然后我做了这个，它对我有用：

    grid.onSort.subscribe(function (e, args) {
        var sortCol, sortDir;

        var comparer = function (a, b) {
            var x = a[sortCol], y = b[sortCol];
            return (x === y ? 0 : (x > y ? 1 : -1)) * sortdir;
        };

        var cols = args.sortCols;
        for (var i = 0, l = cols.length; i < l; i++) {
            sortdir = cols[i].sortAsc ? 1 : -1;
            sortcol = cols[i].sortCol.field;
            dataView.sort(comparer, sortdir);
        }
    });

【讨论】：