您可以在SlickGird中使用分组对多个列进行排序吗？
您可以在SlickGird中使用分组对多个列进行排序吗？
提问于 2015-02-13 04:54:53
所以我的问题很简单，但我在谷歌上搜索到的答案很少。所以我来到了你的stackoverflow社区，有没有可能在slickgrid中对列进行分组排序，然后在不删除分组的情况下对其他列进行排序？
例如，有一个包含State、City、Zip列的表。我在state上有一个分组，每个州都有可折叠的组。现在，是否可以对City和/或Zip列进行排序，以便每个分组状态中的行按所需的方向排序？
回答 2
Stack Overflow用户
发布于 2015-02-16 13:04:47
您需要启用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>
Stack Overflow用户
发布于 2016-01-08 04:46:50
正如在另一个注释中所述，请确保启用了多列排序，并且希望能够排序的列具有可排序列选项。然后我做了这件事，这对我很有效：
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);
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28487572
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号