data - slickgrid editable

SlickGrid ¿Qué es una vista de datos?

Question

Comencé a usar SlickGrid y me confundí sobre la diferencia entre Data View y Grid (con la edición habilitada). No he encontrado en la documentación alguna discusión sobre la vista de datos, aunque se ha mencionado allí.

Por favor iluminame.

Answer 1

DataView es una abstracción sobre su fuente de datos. Si todos los datos están disponibles en el cliente (es decir, en una matriz de Javascript), DataView puede proporcionar muchas características útiles que la cuadrícula en sí no tiene. (Este hecho de que la cuadrícula carece de estas características es por diseño: SlickGrid intenta mantener el núcleo simple y al mismo tiempo que fomenta el diseño modular y la abstracción de datos en su API).

DataView funciona al tomar sus datos y actuar como un proveedor de datos que puede transferir a SlickGrid en lugar de a su matriz de datos original. Por ejemplo, si crea datos del grupo DataView, la cuadrícula considera que las filas del "grupo" son solo elementos de datos normales, por lo que la cuadrícula no necesita estar al tanto de ellos. DataView le dice a la cuadrícula que esos elementos tienen una visualización y comportamiento personalizados y proporciona implementaciones de ambos. Luego, conecta los eventos onRowCountChanged y onRowsChanged de DataView para actualizar la cuadrícula y listo.

Aquí hay una lista aproximada de características que DataView agrega a la cuadrícula:

• Paginacion
• Clasificación.
• Buscar.
• Agrupación con totales.
• Expandir / contraer grupos.

Answer 2

DataView permite ordenar y filtrar los datos sin modificarlos o la cuadrícula. Puede considerarlo como una superposición en la parte superior de la cuadrícula que proporciona funciones relacionadas con la vista; en algunos casos, mejora estas funciones.

¡Espero que ayude!

Answer 3

En términos muy simples, solo piense en tres capas:

  Grid
  ----
DataView
  ----
  Data

En la parte inferior tienes los datos en bruto. Esto es solo una simple y vieja matriz. Cada elemento de la matriz representa una fila de datos (que se mostrará como una fila en la cuadrícula).

El DataView lee la matriz de datos y lo pone a disposición de la cuadrícula al exponer un par de métodos estándar. De esta manera, cuando la cuadrícula desea obtener datos para fines de visualización, solo habla con la vista de datos a través de uno de los métodos estándar.

La cuadrícula es el componente de visualización. Su única responsabilidad es representar el código HTML necesario para mostrar la salida deseada en la pantalla.

La cuadrícula nunca accede directamente a los datos. Solo habla con la vista de datos. Esto permite que la vista de datos realice trucos cuando se devuelven los datos a la cuadrícula, como la entrega de filas "fantasmas" utilizadas para representar encabezados de grupo.

Si está interesado, el siguiente ejemplo es simplemente el ejemplo más simple que puede encontrar que usa una vista de datos con 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);