您可以通过SlickGird中的分组对多列进行排序吗？
[英]Can you sort multiple columns with a grouping in SlickGird?
问题描述
So my question is pretty basic but my google search has revealed very little answers. 
所以我的问题很基本，但是我的Google搜索显示出很少的答案。 So I come to you stackoverflow community, is it possible to have a grouping sort of a column in a slickgrid and then sort other columns without removing the grouping? 因此，我来到了您的stackoverflow社区，是否可以在slickgrid中对某列进行分组排序，然后在不删除分组的情况下对其他列进行排序？
An example would be having a table with columns of State, City, Zip. 例如，有一个包含州，城市，邮政编码列的表。 I have a grouping on State to have collapsable groups for each state. 我在State上进行分组，以便每个州都有可折叠的组。 Now would it be possible to sort the City and/or Zip column so that the rows within each grouped state is ordered in the desired direction? 现在是否可以对“城市”和/或“邮政编码”列进行排序，以使每个分组状态内的行都按所需方向排序？
2 个解决方案
解决方案1
0 2015-02-16 05:04:47
You'll need to enable multi-column sorting and provide the sortable column option for each column on which sorting is desired. 您需要启用多列排序，并为需要进行排序的每一列提供可排序的列选项 。
Note: You'll need to use shift-click to actually perform multi-column sorting. 注意：您需要使用shift-click来实际执行多列排序。
For the result as described by your example: 对于您的示例所描述的结果：
- Click to group the data by state 单击以按状态分组数据
- Click the state column header to sort it 单击状态列标题对其进行排序
- Shift-click any other columns to alternate their sort order 按住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
0 2016-01-07 20:46:49
Just as stated in the other comment, make sure that you have enabled multi-column sorting and that the columns you want to be able to sort on have the sortable column option. 就像其他注释中所述，请确保已启用多列排序，并且要对其进行排序的列具有可排序的列选项。 Then I did this, and it worked for me: 然后我这样做了，它对我有用：
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);
}
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.