Improve the data processing performance of Dojo grid

Introduction: Dojo has introduced a powerful and robust control--grid starting from 1.0. Programmers can use this control to make beautiful spreadsheets when developing GUI programs. One of the most important aspects of GUI programs is the user experience, but when you add large amounts of data to Grid, the response of the program is usually very slow. This article uses a number of methods to improve the performance of Dojo Grid to increase data, and to enhance the user experience.

DOJO Grid Structure

The Dojo Grid is somewhat structurally similar to the familiar MVC pattern. The MVC pattern is the abbreviation for "Model-view-controller", which is "model-view-controller".

Figure 1.MVC Structure

One of the simplest Grid structures mainly consists of the following:

Models (model)

Each grid will contain data, so each grid begins with the definition of Model. As the definition in Listing 1, Model contains the Dojotype (Dojo Model Class), JSID (private ID), structure (structure), Store (database), and so on. The more important part is the store, which places the data stored in the Grid.

Listing 1. Definition of Grid

<div　id="grid1"　dojotype="dojox.grid.DataGrid"　jsid="modelGrid"　 rowselector="0px"
　 canSort="false"　structure="modelGridLayout"　 Store="modelStore"></div>

View and Structure (Structure)

View is used to define each data column, and a view is a combination of multiple data columns. By defining View, the Grid displays the data as required. Structure is a collection of view, which means you can combine multiple view groups into one Structure. Structure will be used by grid, and View will not be used directly by grid, but is packaged into a Structure to use. Listing 2 is an example of a grid Layout that defines the structure of the grid. The cells section defines the information for the Grid column definition. Each column needs to define the name, ID, field, and the HTML form of the column, such as the height-to-width height. Subsequent operations on the Grid column are primarily for field fields.

Listing 2. Definition of Grid Layout

ModelGridLayout　=　[{
　 cells:　[
　 {　name:'<div　style="width:20px;height:20px;"><input　type="checkbox"
　 onclick="DeviceGridRevertSelectAll(this)"　id="checkcollection"></div>',
　 field:　'Sel',　editable:　true,　width:　'20px',　cellStyles:　'text-decoration:　 none;
　 cursor:default;　text-align:　center;position:　relative;　left:　-10px',　 headerStyles:
　 'text-align:　center;',　type:　dojox.grid.cells.Bool　},

　 {　name:　'Model',field:　'Model',　width:　'170px',cellStyles:'font-size:9pt;
　 cursor:　default;text-align:　left;',　cellClasses:　'defaultColumn',　 headerStyles:
　 'text-align:　center;'},

　 {　name:　'Device',field:　'Device',　width:　'150px',　cellStyles:　'font-size:　 9pt;
　 font-style:normal,text-decoration:　none;　cursor:default;text-align:　left;',
　 cellClasses:　'defaultColumn',　headerStyles:　'text-align:　center;'},
　 ]
　 }];