- PVSM.RU - https://www.pvsm.ru -
Зачастую многие начинающие Web-разработчики страдают от того, что приходится снова и снова изобретать велосипед. Вывода и форматирование данных становится сложнее и запутаннее. Но! С этой задачей легко справится Dojo!
Около года назад я начал заниматься разработкой Web-приложений в одной компании. Исторически сложилось так, что приложение использовало большое количество таблиц для вывода данных. Каждая таблица — это некий агент, занимающийся выборкой данных из БД и генерацией HTML. Со временем количество таблиц продолжило плодиться, как и количество агентов, что начало создавать некоторые проблемы при высоких нагрузках на сервер.
Для решения этой проблемы было решено использовать Dojo. Теперь все что требуется — это данные в формате JSON, а компонент Enhanced Grid сделает всю рутинную работу за нас!
Чтобы лучше понять о чем идет речь посмотрите это видео с 3 минуты 35 секунды:
Любой grid в Dojo — это виджет, который формирует HTML таблицу на основе выборки данных. Эти данные хранятся в специализированном хранилище — Store.
Возможности EnhancedGrid'a:
dojo.require("dojo.data.ItemFileWriteStore");
//Создаем структуру данных
var data = {
identifier: 'id', //имя поля которое будет использоваться в качестве идентификатора
items: [] //сюда необходимо загрузить наши данные JSON
};
//Создаем хранилище данных
var store = new dojo.data.ItemFileWriteStore({data: data});
var layout = [[
{'name': 'Column 1', 'field': 'id'},
{'name': 'Column 2', 'field': 'col2'},
{'name': 'Column 3', 'field': 'col3', 'width': '230px'},
{'name': 'Column 4', 'field': 'col4', 'width': '230px'}
]];
dojo.require("dojox.grid.EnhancedGrid");
var grid = new dojox.grid.EnhancedGrid({
id: 'grid',
store: store,
structure: layout,
rowSelector: '20px',
selectionMode: 'multiple'
}, document.createElement('div'));
dojo.byId("gridDiv").appendChild(grid.domNode);
//отображаем grid
grid.startup();
});
Наш grid готов!
С помощью Enhanced Grid'a мы можем работать с таблицами любой структуры, указав лишь разметку таблицы и загрузив данные.
Пример и исходник можно посмотреть здесь [8]
Автор: vexan
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/veb-razrabotka/4666
Ссылки в тексте:
[1] dojox.grid.enhanced.plugins.Filter: http://dojotoolkit.org/reference-guide/1.7/dojox/grid/EnhancedGrid/plugins/Filter.html#dojox-grid-enhancedgrid-plugins-filter
[2] dojox.grid.enhanced.plugins.exporter.*: http://dojotoolkit.org/reference-guide/1.7/dojox/grid/EnhancedGrid/plugins/Exporter.html#dojox-grid-enhancedgrid-plugins-exporter
[3] dojox.grid.enhanced.plugins.NestedSorting: http://dojotoolkit.org/reference-guide/1.7/dojox/grid/EnhancedGrid/plugins/NestedSorting.html#dojox-grid-enhancedgrid-plugins-nestedsorting
[4] dojox.grid.enhanced.plugins.Menu: http://dojotoolkit.org/reference-guide/1.7/dojox/grid/EnhancedGrid/plugins/Menus.html#dojox-grid-enhancedgrid-plugins-menus
[5] dojox.grid.enhanced.plugins.DnD: http://dojotoolkit.org/reference-guide/1.7/dojox/grid/EnhancedGrid/plugins/DnD.html#dojox-grid-enhancedgrid-plugins-dnd
[6] dojox.grid.enhanced.plugins.Pagination: http://dojotoolkit.org/reference-guide/1.7/dojox/grid/EnhancedGrid/plugins/Pagination.html#dojox-grid-enhancedgrid-plugins-pagination
[7] dojox.grid.enhanced.plugins.Search: http://dojotoolkit.org/reference-guide/1.7/dojox/grid/EnhancedGrid/plugins/Search.html#dojox-grid-enhancedgrid-plugins-search
[8] здесь: http://livedocs.dojotoolkit.org/dojox/grid/EnhancedGrid
Нажмите здесь для печати.