SlickGrid: prosty przykład użycia DataView zamiast surowych danych?

Question

SlickGrid: prosty przykład użycia DataView zamiast surowych danych?

Pracuję z SlickGrid, wiążąc dane bezpośrednio do siatki z połączenia Ajax. To działa dobrze w tej chwili, siatka aktualizuje się dynamicznie i jest sortowalny, a ja używam niestandardowego formatera dla jednej kolumny:

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);
  });
});

Jednak chcę zastosować klasę do wierszy w siatce na podstawie wartości danych, więc wygląda na to, że muszę użyć DataView zamiast. Przykład DataView na SlickGrid wiki jest dość skomplikowany i posiada wiele dodatkowych metod.

Proszę, czy ktoś może wyjaśnić, jak po prostu przekonwertować data do DataView - zarówno początkowo, jak i na AJAX reload - pozostawiając sortowanie siatki, i nadal używać mojego niestandardowego formatera? (Nie muszę wiedzieć, jak zastosować klasę, dosłownie tylko jak używać DataView.)

Mam nadzieję, że to jedna lub dwie dodatkowe linie wewnątrz połączenia, ale obawiam się, że to może być bardziej skomplikowane.

12

javascript jquery datagrid slickgrid

Author: Community, 2012-07-23

Source

3 answers

Poniższe dobrze wyjaśnia dataView: https://github.com/mleibman/SlickGrid/wiki/DataView

2

Author: user2616416,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-24 22:09:37

MultiColumnSort: true = = > sortCol Typ: Tablice.
multiColumnSort: false = = > sortCol type: Object.

0

Author: Hak-young Leem,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-11 07:31:47

score 18 · Accepted Answer

Kluczowe elementy to zainicjowanie siatki za pomocą dataview jako źródła danych, połączenie zdarzeń tak, aby siatka reagowała na zmiany w dataview i ostatecznie przekazywała dane do dataview. Powinno to wyglądać mniej więcej tak:

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();
  });
});

Zauważ, że nie musisz tworzyć nowej siatki za każdym razem, wystarczy powiązać dane z dataview.

Jeśli chcesz zaimplementować sortowanie, musisz również powiedzieć dataview, aby sortowała, gdy siatka otrzyma Zdarzenie sortowania:

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));
}

(Ten podstawowy sortowanie jest pobierane z przykładów SlickGrid, ale możesz chcieć zaimplementować coś domowego; na przykład bez użycia zmiennej globalnej)