Simple Slickgrid le tri ne fonctionne pas

Est-il évident pourquoi ce Slickgrid exemple ne devrait pas fonctionner. Fondamentalement, il n'a pas de tri en cliquant sur les colonnes.

        var grid;
var columns = [
{id:"title", name:"Title", field:"title", sortable: true},
{id:"duration", name:"Duration", field:"duration", sortable: true},
{id:"%", name:"% Complete", field:"percentComplete", sortable: true},
{id:"start", name:"Start", field:"start", sortable: true},
{id:"finish", name:"Finish", field:"finish", sortable: true},
{id:"effort-driven", name:"Effort Driven", field:"effortDriven", sortable: true}
];
var options = {
enableCellNavigation: true,
enableColumnReorder: false
};
$(function() {
var data = [];
for (var i = 0; i < 500; i++) {
data[i] = {
id: i,
title: "Task " + i,
duration: "5 days",
percentComplete: Math.round(Math.random() * 100),
start: "01/01/2009",
finish: "01/05/2009",
effortDriven: (i % 5 == 0)
};
}
var dataView = new Slick.Data.DataView();
grid = new Slick.Grid("#myGrid", dataView, columns, options);
function comparer(a,b) {
var x = a[sortcol], y = b[sortcol];
return (x == y ? 0 : (x > y ? 1 : -1));
}
var sortcol = "json_number";
var sortdir = 1;
grid.onSort.subscribe(function(e, args) {
sortdir = args.sortAsc ? 1 : -1;
sortcol = args.sortCol.field;
//using native sort with comparer
//preferred method but can be very slow in IE with huge datasets
dataView.sort(comparer, args.sortAsc);
});
dataView.beginUpdate();
dataView.setItems(data);
dataView.endUpdate();
grid.invalidate();
grid.render();
$("#myGrid").show();
})
InformationsquelleAutor XoR | 2011-04-26
  1. 17

    Essayez d'ajouter cet auditeur, qui re-donne de la grille lorsque des lignes d'obtenir bousculés:

    dataView.onRowsChanged.subscribe(function(e,args) {
grid.invalidateRows(args.rows);
grid.render();
});

    Exemple Original ici: http://mleibman.github.com/SlickGrid/examples/example4-model.html

    • Je vous remercie beaucoup. C'était la pièce manquante
    • J'ai mis ce code dans @oscilloscope, mais pour une raison quelconque, mon grille n'est pas rafraîchissant. J'ai parcouru le genre de code que j'ai tiré à partir de la page des exemples, et ça fonctionne. Mais pour certaines raisons, la grille ne sera pas re-rendu.
    • Regarde le code qui est dans la question d'origine, il peut aider.
    InformationsquelleAutor oscilloscope
  2. 4

    Même si il y en a déjà accepté de répondre à ce qui a certainement résolu la question initiale, je voulais signaler une erreur commune sur stackoverflow lors de la manipulation Slickgrid de la méthode subscribe.

    Imaginons notre grille est dans la variable appelée "grille", comme dans la plupart des autres exemples.
    Cela se produit dans la plupart des accepté et/ou upvoted réponses:

    dataView.onRowsChanged.subscribe(function(e,args) {
grid.invalidateRows(args.rows);
grid.render();
});

    ou

     grid.onSort.subscribe(function(e, args){
var cols = args.sortCols;
data.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()
grid.render()
})

    Ce faire, les exemples fonctionnent comme prévu? Oui, ils le font.. dans certaines circonstances.

    Imaginons une fonction qui ajoute un Slickgrid à une liste de Slickgrids:

    var m_grids = []
function anyName(){
var grid;
//..run code
//..run subscribe
m_grids.push(grid)
}

    Donc ce qui se fait maintenant, quand nous essayons d'appeler n'importe quelle fonction subscribe, tandis que le abonnez-vous de la fonction contient la variable de la grille? C'seulement affecte la dernière grille, n'importe qui un le abonnez-vous ont été exécutés sur.
    La manière correcte de s'abonner à ces fonctions est par le paramètre args:

    dataView.onRowsChanged.subscribe(function(e,args) {
args.grid.invalidateRows(args.rows);
args.grid.render();
});

    ou

     grid.onSort.subscribe(function(e, args){
var cols = args.sortCols;
args.grid.getData().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;
})
args.grid.invalidate()
args.grid.render()
})

    Cela pourrait être un cas mineur, car il nécessite généralement plus d'un Slickgrid sur la même page, mais pourquoi faire de mal quand on pouvait le faire corriger très facilement 🙂

    InformationsquelleAutor Lain