SlickGrid ¿qué es una vista de datos?

Question

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

Por favor aclararme.

Answer 1

En términos muy simples, sólo pensar en tres capas:

Grid 
    ---- 
DataView 
    ---- 
    Data 

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

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

The Grid es el componente de visualización. Su única responsabilidad es presentar 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 al devolver los datos a la grilla, como la entrega de filas "fantasmas" usadas para representar encabezados de grupo.

Si le interesa, el siguiente ejemplo es simplemente el ejemplo más simple que se le puede ocurrir que utiliza 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); 

Answer 2

DataView permite ordenar y filtrar los datos sin modificarlos ni 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

DataView es una abstracción en la parte superior de 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 funciones útiles que la cuadrícula no tiene. (Este hecho de que la grilla carece de estas características es por diseño - SlickGrid trata de mantener el núcleo delgado y simple mientras fomenta el diseño modular y la abstracción de datos en su API.)

DataView funciona al tomar sus datos y actuar como datos proveedor que puede pasar a SlickGrid en lugar de su matriz de datos original. Por ejemplo, si crea datos del grupo DataView, hace que la cuadrícula piense que las filas del "grupo" son solo elementos de datos regulares, por lo que la cuadrícula no necesita conocerlos. DataView le dice a la grilla que esos elementos tienen una visualización y un comportamiento personalizados y proporciona implementaciones de ambos. A continuación, conecte los eventos onRowCountChanged y onRowsChanged de DataView para actualizar la red y listo.

He aquí una lista aproximada de características que DataView se suma a la red:

• paginación.
• Clasificación.
• Búsqueda.
• Agrupación con totales.
• Expandir/Contraer grupos.