Ответ 1
В очень простых терминах просто подумайте о трех слоях:
Grid
----
DataView
----
Data
Внизу у вас есть необработанные данные. Это просто простой массив. Каждый элемент массива представляет одну строку данных (для отображения в виде одной строки в сетке).
DataView считывает массив данных и делает его доступным для сетки, выставляя несколько стандартных методов. Таким образом, когда сетка хочет получить данные для отображения, она просто говорит с dataview через один из стандартных методов.
Сетка представляет собой компонент отображения. Его единственная ответственность - отобразить HTML-код, необходимый для отображения желаемого вывода на экране.
Сетка никогда не обращается к данным напрямую. Он всегда разговаривает с данными. Это позволяет dataview выполнять трюки при возврате данных в сетку, например, доставку строк phantom, используемых для представления заголовков групп.
Если вам интересно, приведенный ниже пример - это самый простой пример, который вы можете использовать, используя dataview с 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);