提高Dojo Grid的数据处理性能

简介：Dojo 从 1.0 开始引入了一个功能强大又健壮的控件—— Grid。程序员可以使用此控件在开发 Gui 程序时制作出漂亮的电子表格。Gui 程序最注重的一个方面就是用户体验，但是在往 Grid 中添加大 量数据的时候，程序的响应通常非常慢。本文通过一些方法来提高 Dojo Grid 的增加数据时的性能，增 强用户体验。

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 的定义

<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 的定义

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