A brief overview of the Dojo Framework Enhanced Grid or how to quickly and easily organize the output of data in the form of tables

Often, many novice Web developers suffer from having to reinvent the wheel again and again. Outputting and formatting data becomes more complicated and confusing. But! Dojo can easily handle this task!

Foreword

About a year ago I started developing web applications in one company. Historically, the application used a large number of tables for data output. Each table is a kind of agent that retrieves data from the database and generates HTML. Over time, the number of tables continued to multiply, as did the number of agents, which began to create some problems with high server loads.

To solve this problem, it was decided to use Dojo. Now all that is required is data in JSON format, and the Enhanced Grid component will do all the routine work for us!

To better understand what is going on, watch this video from 3 minutes 35 seconds:

')

Minimum theory

Any grid in Dojo is a widget that generates an HTML table based on a sample of data. This data is stored in a specialized storage - Store.

EnhancedGrid features:

• Data formatting
• Data Filtering - dojox.grid.enhanced.plugins.Filter
• Export data to various formats - dojox.grid.enhanced.plugins.exporter. *
• Nested sorting - dojox.grid.enhanced.plugins.NestedSorting
• Context menus - dojox.grid.enhanced.plugins.Menu
• Drag'n'Drop - dojox.grid.enhanced.plugins.DnD
• Paginated output - dojox.grid.enhanced.plugins.Pagination
• Data search - dojox.grid.enhanced.plugins.Search

Decision

Create a data warehouse

dojo.require("dojo.data.ItemFileWriteStore"); //   var data = { identifier: 'id', //        items: [] //     JSON }; //   var store = new dojo.data.ItemFileWriteStore({data: data}); 

Create table layout

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

Create a 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(); }); 

Our grid is ready!

Total

With the help of Enhanced Grid, we can work with tables of any structure, specifying only the table layout and loading the data.

An example and source can be found here.