SlickGrid ce qui est une Vue de Données?

En termes très simples, il suffit de penser de trois couches:

  Grid
  ----
DataView
  ----
  Data

En bas, vous avez les données brutes. C'est juste un bon vieux tableau. Chaque élément du tableau représente une ligne de données (à être affiché comme une ligne dans la grille).

la DataView lit le tableau de données et le rend disponible à la grille en exposant quelques méthodes standard. De cette façon, lorsque la grille veut obtenir des données à des fins d'affichage, elle ne fait que parler à la dataview via l'un des standards méthode.

la grille est le composant display. Sa seule responsabilité est de rendre le code HTML nécessaire pour afficher la sortie désirée sur l'écran.

la grille n'accède jamais directement aux données. Il ne parle jamais à la dataview. Cela permet à dataview d'exécuter des astuces lors du retour des données dans la grille, telles que la livraison de lignes "fantômes" utilisées pour représenter les en-têtes de groupe.

Si vous êtes intéressé, l'exemple ci-dessous est à peu près le plus simple exemple vous pouvez trouver qui utilise un dataview avec SlickGrid.

var data = [
  { title: "Primer",       rating: "A" },
  { title: "Matrix",       rating: "B" },
  { title: "Transformers", rating: "C" },
];
var columns = [
  { id: "title",  name: "Title",  field: "title" },
  { id: "rating", name: "Rating", field: "rating" }
];
var options = {
  enableColumnReorder: false  // ... whatever grid options you need
};

var dataView = new Slick.Data.DataView();
var 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();
});

// Feed the data into the dataview
dataView.setItems(data);