Can you sort multiple columns with a grouping in SlickGird?
Question
So my question is pretty basic but my google search has revealed very little answers. 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?
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. 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 answers
solution1
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.
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
<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>
solution2
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);
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.