Question

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

一个例子是拥有一个包含State，City，Zip列的表。我有一个国家分组，每个州都有可折叠的团体。现在是否可以对City和/或Zip列进行排序，以便每个分组状态中的行按所需方向排序？

Answer 1

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

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

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

单击以按州分组数据
单击州列标题进行排序
按住Shift键并单击任何其他列以替换其排序顺序

＆＃13;

<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>

＆＃13;

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

你能在SlickGrid中使用分组对多个列进行排序吗？

2 个答案: