提高Dojo Grid的数据处理性能

提高Dojo Grid的数据处理性能2011-08-17 IBM 孙妍简介：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: "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;"},
  ]
  }];