按多列对 Slickgrid 进行排序？

Question

我刚刚开始为我正在从事的项目测试 Slickgrid，并且给我留下了深刻的印象它的性能。我的一项要求是对多列进行排序。我没有完全专注于 Slickgrid 中的 Dataview，所以也许我错过了一些明显的东西，但是有没有办法对多列上的网格进行排序？即使用户界面无法处理多个排序，我也希望能够按顺序调用列的函数，再加上升序或降序。我可以使用 Datatables 执行此操作，但它没有分组（项目的另一个要求）。

在最坏的情况下，我将求助于在服务器上进行排序并将内容以静态方式返回给客户端。

Answer 1

我让它以多列排序的方式为 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);
}

以防万一它对某人有帮助。

Answer 2

您可以链接排序比较器来进行多列排序。 不这样做

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”并让它们显示箭头来应用排序指示符（或者您可以通过其他方式）指示排序列）。

Answer 3

这里有一个使用“multiColumnSort”选项的示例。

http://mleibman.github.com/SlickGrid/examples/example -multi-column-sort.html

但我认为它不起作用，因为 args.sortCols 始终是一个 1 的数组。

[编辑]
为了使其工作，我需要在单击列标题之前按住 Shift 键（恕我直言，不是很直观）
另请参阅：https://github.com/mleibman/SlickGrid/pull/276

Answer 4

我花了一段时间尝试用 dataview 解决这个问题（没有 Shift 键恶作剧），我想我找到了解决方法。

使用单列排序 {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();      
});

记住所有以前的订单。就可以了。按预期工作。