提高 Dojo Grid 的数据处理性能（1）Dojo Grid结构

look_w

Dojo Grid 结构Dojo Grid 在结构上有点类似于大家熟悉的 MVC 模式。MVC 模式是“Model-View-Controller”的缩写，也就是“模型 - 视图 - 控制器”。
图 1.MVC 结构一个最简单的 Grid 在结构上主要有以下几方面构成：

• 模型 (Model)

每个 Grid 都会包含数据，所以每个 Grid 开头都会去定义 Model。如清单 1 中的定义，Model 包含了 dojotype（dojo 模型类），jsid（专用 id），structure（结构），Store（数据库）等。        其中比较重要的部分是 Store，它放置了 Grid 中存储的数据。
清单 1. Grid 的定义

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

• 视图 (View) 和结构 (Structure)

View 用来定义每个数据列，一个 View 是多个数据列的组合。通过定义 View，使 Grid 按照要求来显示数据。        Structure 是 View 的集合，也就是说可以将多个 View 组合成一个 Structure。Structure 会被 Grid 用到，而 View 不会被 Grid 直接用到，        而是被包装成一个 Structure 来使用。清单 2 中是一个 Grid Layout 的范例，它定义了 Grid 的结构。cells 部分定义了 Grid 列定义的信息。        每一列需要定义 name、id、field，以及列的 html 形式如长宽高之类的。之后对 Grid 列的操作主要是针对 field 域。
清单 2. Grid Layout 的定义

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

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

• Grid 控件 (Widget)

这里的 Grid 控件类似于 MVC 中的控制器（Control）。通过 Grid 各种预先定义的 API 对 Grid 的数据（Model），        视图（View）有效的组织起来，并进行操作。以达到有效控制 Grid 数据存取、更新、外观变化的目的。        从而显示出一个类似于电子表格的 Grid 列表。