我刚刚开始测试Slickgrid我正在进行的项目,我对它的性能印象非常深刻。我有一个要求是对多列进行排序。我没有把头完全包裹在Slickgrid的Dataview中,所以也许我错过了一些明显的东西,但有没有办法在多列上对网格进行排序?即使UI不能处理多个排序,我希望能够按顺序调用一个函数,加上升序或降序。我能够使用Datatables执行此操作,但它没有分组(项目的另一个要求)。
在最糟糕的情况下,我将在服务器上进行排序并将内容提供给静态排序的客户端。
答案 0 :(得分:6)
您可以将排序比较器链接起来进行多列排序。而不是做
function comparerOnCol1(a, b) {
return a["col1"] - b["col1"];
}
function comparerOnCol2(a, b) {
return a["col2"] - b["col2"];
}
你可以做到
// sort by col1, then col2
function combinedComparer(a, b) {
return comparerOnCol1(a, b) || comparerOnCol2(a, b); // etc.
}
或者直接实现它。
至于反映UI中的排序顺序,虽然您不能直接执行,但您可以通过在要排序的列定义上设置“headerCssClass”并让它们显示箭头来应用排序指示符(或者但是你要指的是排序列。)
答案 1 :(得分:6)
这里有一个使用'multiColumnSort'选项的例子。
http://mleibman.github.com/SlickGrid/examples/example-multi-column-sort.html
我认为它不起作用,因为args.sortCols总是一个1的数组。
[编辑] 为了使它工作,我需要在点击列标题前保持移位(不是非常直观的恕我直言) 另见:https://github.com/mleibman/SlickGrid/pull/276
答案 2 :(得分:6)
我使用了多列排序的dataView。是最容易理解的人。这是来自github中的示例,除了我要为dataView.sort()传递一个参数。它总是可以,你可以在你的函数中处理排序方向。
grid.onSort.subscribe(function (e, args) {
gridSorter(args.sortCols, dataView);
});
function gridSorter(sortCols, dataview) {
dataview.sort(function (row1, row2) {
for (var i = 0, l = sortCols.length; i < l; i++) {
var field = sortCols[i].sortCol.field;
var sign = sortCols[i].sortAsc ? 1 : -1;
var x = row1[field], y = row2[field];
var result = (x < y ? -1 : (x > y ? 1 : 0)) * sign;
if (result != 0) {
return result;
}
}
return 0;
}, true);
}
以防它帮助某人。
答案 3 :(得分:1)
我花了一些时间尝试用dataview解决这个问题(没有shift键shenanigans),我想我找到了这样做的方法。
使用单列排序{multiColumnSort: false}
并将排序参数存储在闭包中。如果字段相等,请遵循先前的比较器。
var currentSortCmp = null;
grid.onSort.subscribe(function (e, args) {
// declarations for closure
var field = args.sortCol.field;
var sign = args.sortAsc ? 1 : -1;
var prevSortCmp = currentSortCmp;
// store closure in global
currentSortCmp = function (dataRow1, dataRow2) {
var value1 = dataRow1[field], value2 = dataRow2[field];
//if equal then sort in previous closure (recurs)
if (value1 == value2 && prevSortCmp)
return prevSortCmp(dataRow1, dataRow2);
return (value1 == value2 ? 0 : (value1 > value2 ? 1 : -1)) * sign;
};
dataView.sort(currentSortCmp);
grid.invalidate();
grid.render();
});
记住以前的所有订单。只是工作。按预期工作。