SlickGrid: semplice esempio di utilizzo di DataView piuttosto che dati grezzi?

Sto lavorando con SlickGrid, che lega i dati direttamente alla griglia da una chiamata Ajax. Sta funzionando bene in questo momento, la griglia si aggiorna in modo dinamico ed è sortabile e sto usando un formattero personalizzato per una colonna:

var grid; var columns = [{ id: "time", name: "Date", field: "time" }, { id: "rating", name: "Rating", formatter: starFormatter // custom formatter } ]; var options = { enableColumnReorder: false, multiColumnSort: true }; // When user clicks button, fetch data via Ajax, and bind it to the grid. $('#mybutton').click(function() { $.getJSON(my_url, function(data) { grid = new Slick.Grid("#myGrid", data, columns, options); }); }); 

Tuttavia, voglio applicare una class a righe nella griglia in base al valore dei dati, quindi mi sembra necessario utilizzare invece un DataView . L' esempio DataView sul wiki SlickGrid è piuttosto complicato e presenta tutti i tipi di methods extra.

Forse qualcuno potrebbe spiegare come faccio a convertire i data in un DataView – sia inizialmente che su Ajax reload – lasciando la griglia sortabile e continuando a utilizzare il mio personalizzatore? (Non ho bisogno di sapere come applicare la class, letteralmente come utilizzare un DataView.)

Spero che sia una o due linee extra all'interno della chiamata .getJSON , ma temo che possa essere più complicata di quella.

I pezzi chiave sono quello di inizializzare la griglia con un dataview come origine dati, colbind gli events in modo che la griglia risponda alle modifiche del dataview e infine alimenta i dati al dataview. Dovrebbe assomigliare a qualcosa di simile a questo:

 dataView = new Slick.Data.DataView(); grid = new Slick.Grid("#myGrid", dataView, columns, options); // wire up model events to drive the grid dataView.onRowCountChanged.subscribe(function (e, args) { grid.updateRowCount(); grid.render(); }); dataView.onRowsChanged.subscribe(function (e, args) { grid.invalidateRows(args.rows); grid.render(); }); // When user clicks button, fetch data via Ajax, and bind it to the dataview. $('#mybutton').click(function() { $.getJSON(my_url, function(data) { dataView.beginUpdate(); dataView.setItems(data); dataView.endUpdate(); }); }); 

Notare che non è necessario creare una nuova griglia each volta, basta associare i dati al dataview.

Se si desidera implementare l'sorting, è inoltre necessario indicare il dataview per ordinare quando la griglia riceve un evento di sorting:

 grid.onSort.subscribe(function (e, args) { sortcol = args.sortCol.field; // Maybe args.sortcol.field ??? dataView.sort(comparer, args.sortAsc); }); function comparer(a, b) { var x = a[sortcol], y = b[sortcol]; return (x == y ? 0 : (x > y ? 1 : -1)); } 

(Questa classificazione di base viene prelevata dagli esempi SlickGrid, ma si potrebbe desiderare di implementare qualcosa a casa propria, senza utilizzare la variabile globale ad esempio)

Di seguito viene illustrato un ottimo lavoro che spiega dataView: https://github.com/mleibman/SlickGrid/wiki/DataView

multiColumnSort: true ==> tipo sortCol: arrays.
multiColumnSort: false ==> tipo sortCol: object.