nie można sortować za pomocą slickgrid + knockout - javascript, jquery, knockout.js, slickgrid

Udało mi się stworzyć model z nokautem i załadować slikgrid z niestandardowymi powiązaniami. Śledziłem ten przykład w JSFIddle: http://jsfiddle.net/joybroto/bwSmy/4/

Ale nie jestem w stanie dodać sortowania do kolumn. Do dokumentacji slickgrid muszę dodać sortable: true do kolumn. Ja to zrobiłem.

Również dokumentacja (https://github.com/mleibman/SlickGrid/wiki/Getting-Started) mówi, że sortowanie powinno odbywać się poprzez „słuchanie metody onSort”:

slickgrid.onSort.subscribe(function(e, args){ // args: sort information.
var field = args.sortCol.field;

rows.sort(function(a, b){
var result =
a[field] > b[field] ? 1 :
a[field] < b[field] ? -1 :
0;

return args.sortAsc ? result : -result;
});

slickgrid.invalidate();
});

Nie rozumiem w 100%, w jaki sposób wykonywane są niestandardowe wiązania nokautowe za pomocą slickgrid. Nie jestem więc w stanie zrozumieć, jak subskrybować onSort za pomocą części typu knockout.

Odpowiedzi:

Mam to. Musisz zachować odniesienie do swoich ustawień danych i sortować je według nich, zamiast tych wewnątrz parametru args.

Tak więc, oto wiele dobrych odpowiedzi tutaj (Aktualizacja SlickGrid za pomocą Knockoutjs za pośrednictwem dependObservable) i to (https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-multi-column-sort.html). Opiera się na sortowaniu wielokolumnowym:

var grid;
var gridData;
ko.bindingHandlers.slickGrid = {
init: function (element, valueAccessor) {
var settings = valueAccessor();
gridData = ko.toJS(settings.data); // instead of ko.utils.unwrapObservable(settings.data) since within my ObservableArray there are Observables.
var columns = ko.utils.unwrapObservable(settings.columns);
var options = ko.utils.unwrapObservable(settings.options) || {};
grid = new Slick.Grid(element, gridData, columns, options);

grid.onSort.subscribe(function (e, args) {
var cols = args.sortCols;

gridData.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;
});
grid.invalidate();
});
},
update: function (element, valueAccessor, allBindingAccessor, viewModel) {
var settings = valueAccessor();
gridData = ko.toJS(settings.data); //just for subscription
grid.setData(gridData, false);
grid.resizeCanvas(); // NB Very important for when a scrollbar appears
grid.render();
}

};

Nie jest w 100% ładny, ale działa.