Краткий обзор Dojo Framework Enhanced Grid или как быстро и просто организовать вывод данных в виде таблиц

Зачастую многие начинающие Web-разработчики страдают от того, что приходится снова и снова изобретать велосипед. Вывода и форматирование данных становится сложнее и запутаннее. Но! С этой задачей легко справится Dojo!

Предисловие

Около года назад я начал заниматься разработкой Web-приложений в одной компании. Исторически сложилось так, что приложение использовало большое количество таблиц для вывода данных. Каждая таблица — это некий агент, занимающийся выборкой данных из БД и генерацией HTML. Со временем количество таблиц продолжило плодиться, как и количество агентов, что начало создавать некоторые проблемы при высоких нагрузках на сервер.

Для решения этой проблемы было решено использовать Dojo. Теперь все что требуется — это данные в формате JSON, а компонент Enhanced Grid сделает всю рутинную работу за нас!

Чтобы лучше понять о чем идет речь посмотрите это видео с 3 минуты 35 секунды:

Минимум теории

Любой grid в Dojo — это виджет, который формирует HTML таблицу на основе выборки данных. Эти данные хранятся в специализированном хранилище — Store.

Возможности EnhancedGrid'a:

• Форматирование данных
• Фильтрация данных — dojox.grid.enhanced.plugins.Filter
• Экспорт данных в различные форматы — dojox.grid.enhanced.plugins.exporter.*
• Вложенная сортировка — dojox.grid.enhanced.plugins.NestedSorting
• Контекстные меню — dojox.grid.enhanced.plugins.Menu
• Drag'n'Drop — dojox.grid.enhanced.plugins.DnD
• Постраничный вывод — dojox.grid.enhanced.plugins.Pagination
• Поиск данных — dojox.grid.enhanced.plugins.Search

Решение

Создаем хранилище данных

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'}
]];

Создаем Grid

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 мы можем работать с таблицами любой структуры, указав лишь разметку таблицы и загрузив данные.

Пример и исходник можно посмотреть здесь