如何以编程方式使用 dataView 在 slickGrid 上强制排序？

Question

我有一个 slickGrid，它使用 dataView 来呈现学生成绩。我想在按 id = 0 和 field = 'Student' 的列呈现之前对网格进行默认排序。如何在网格呈现之前触发此列的排序事件？

我之所以要这样做是因为我有一个非常奇怪的错误，可以在这个视频中看到：

http://screencast.com/t/Oz0vlcsQPp

分拣机在第一次 asc/des 排序时工作正常，但随后就完全失控了。注意按应有的方式排序。但是，如果我第一次按学生姓名排序，那么无论我排序多少次，任何其他列上的排序器都可以正常工作，没有任何问题。如果我刷新页面，问题会再次发生。

由于我什至无法理解为什么会发生这种情况，我唯一的希望是最初对学生列进行排序并一起绕过问题。

注意：我从这里使用 naturalSort.js：https://github.com/overset/javascript-natural-sort/blob/master/naturalSort.js。我不认为排序是问题，因为当我最初按学生姓名排序时它工作正常......这个让我脑残......

编辑：正如您在视频中看到的，我的网格单元格数据看起来像“A (78.65%)”。我的数据结构如下所示：

"Column_3":{"displayValue":"A (100%)","sortValue":100.0},
"Column_4":{"displayValue":"B (87.53%)","sortValue":87.53},
"Column_5":{"displayValue":"?","sortValue":-1.0}

我出于排序原因发送一个对象，以便使用百分比作为排序标准。为了完成这项工作，我在网格选项中定义了 dataItemColumnValueExtractor，如下所示：

self.options["dataItemColumnValueExtractor"] = getItemColumnValue;
function getItemColumnValue(item, column) {
    var values = item[column.field];
    return values.displayValue !== undefined ? values.displayValue : values;
}

这允许我使用 sortValue 数据对网格进行排序。这是我的排序事件：

    grid.onSort.subscribe(function(e, args){
        var comparer = function(a, b) {
            var result;
            if (a[args.sortCol.field].sortValue !== undefined && a[args.sortCol.field].sortValue !== null && b[args.sortCol.field].sortValue !== undefined && b[args.sortCol.field].sortValue !== null) {
                result = naturalSort(a[args.sortCol.field].sortValue,b[args.sortCol.field].sortValue);
            }
            else {
                result = naturalSort(a[args.sortCol.field],b[args.sortCol.field]);
            }
            return result;
        };
        dataView.sort(comparer, args.sortAsc);
    });

除了上面提到的排序问题外，一切都很好......任何帮助将不胜感激......

Answer 1

首先...您第一次排序的问题是可以解决的其他问题...

但是如果你想在网格加载时对 col 进行排序，你可以触发 click 事件....

$(function () {
for (var i = 0; i < 50000; i++) {
var d = (data[i] = {});

d["num"] = i;
.
.
d["effortDriven"] = (i % 5 == 0);
} 

dataView = new Slick.Data.DataView();
grid = new Slick.Grid("#myGrid", dataView, columns, options);

$('.slick-header-columns').children().eq(2).trigger('click');  // eq(2) for the 3rd col
}