使用 DOJO 开发定制小部件，第 2 部分: 使用通用的网格处理程序生成 DOJO DataGrid 组件

核心提示： DojoPagingTable.js：处理分页功能的分页表 Javascript 类，pagingTable.html：分页表小部件使用的 HTML 模板文件；它包含用于放置按钮的 div 标记，使用 DOJO 开发定制小部件，第 2 部分: 使用通用的网格处理程序生成 DOJO DataGri

DojoPagingTable.js：处理分页功能的分页表 Javascript 类。

pagingTable.html：分页表小部件使用的 HTML 模板文件；它包含用于放置按钮的 div 标记，这些按钮可以导航至不同的页面。

gridView.html：包含 HTML markup 的 HTML 模板文件；它包含有应在其中放置网格和分页表的 div 标记。

定义网格布局

生成 Dojo DataGrid 的第一步是定义网格布局。布局信息包括想要放置在网格中的列，还有一些附加信息，如格式信息、列分组、列宽等等。

图 1 是 Business Space 示例屏幕，显示的是使用 DojoGridHandler 生成的 DataGrid。

图 1. 使用 DojoGridHandler 生成的 DataGrid

查看原图（大图）

我们将演示如何编写生成上例布局信息的 JSON 文件，但我们将首先描述网格处理程序如何实际生成 Dojo DataGrid 小部件。

Dojo 网格处理程序工作原理

DojoGridHandler 类在 createGrid( ) 方法中加载包含布局信息的 JSON 文件，如清单 1 所示。

清单 1. createGrid( ) 方法

createGrid　:　function(thisVar,gridHeadersURL,gridComponentId,gridDisplayDivId,　
　　pagingDivId,onCellClickMethodName)　
　{　
　this.gridComponentId=thisVar.iContext.widgetId+gridComponentId;　
　this.pagingDivId=thisVar.iContext.widgetId+pagingDivId;　
　this.thisVar　=　thisVar;　
　　
　var　req　=　{　url:gridHeadersURL,　
　　handleAs:　"json",　
　　sync:true,　
　　load:　dojo.hitch(this,　function(data){　
this._gridHeadersURLDef(data,gridDisplayDivId,onCellClickMethodName);　}),　
　　error:　dojo.hitch(this,　this._gridHeadersURLDefError)　
　　　};　
　
　　dojo.xhrGet(req);　
　
　}