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

核心提示： 如何在代码中使用网格处理程序现在，让我们开始学习如何从代码中调用网格处理程序 JavaScript 类，使用 DOJO 开发定制小部件，第 2 部分: 使用通用的网格处理程序生成 DOJO DataGrid 组件(6)，在 JSON 文件中定义布局属性，需要在 JSON 文件（如 gridHan

如何在代码中使用网格处理程序

现在，让我们开始学习如何从代码中调用网格处理程序 JavaScript 类。

在 JSON 文件中定义布局属性。

需要在 JSON 文件（如 gridHandlerLayout.json）中定义 DataGrid 的所有列的布局属性。以下的代码片段显示的是 gridHandlerLayout JSON 文件，其中包含了 图 1 所示的示例屏幕的 DataGrid 的布局信息。

({　
　"layout"　:　[[　
　{　
　　　"field"　:　"name",　
　　　"name":　"Name",　
　　　"formatter"　:　"formatName"　
　},　
　{　
　　　"field"　:　"gender",　
　　　"name":　"Gender"　
　},　
　{　
　　　"field"　:　"fullName",　
　　　"name":　"Full　Name",　
　　　"formatter"　:　"formatFullName"　
　　　
　},　
　{　
　　　"field"　:　"department",　
　　　"name":　"Department"　
　},　
　{　
　　　"field"　:　"location",　
　　　"name":　"Location"　
　},　
　{　
　　　"field"　:　"delete",　
　　　"name":　"Delete",　
　　　"formatter"　:　"formatDelete"　
　}　
　　　]]　
})　

下一步，实例化 DojoGridHandler JavaScript 类，如下所示：

this.gridHandler = new com.ibm.bcgex.common.DojoGridHandler(this.iContext,this.rootContext);

定义一个变量，指向包含布局信息的 JSON 文件，如下所示：

var configURL = this.iContext.io.rewriteURI(""+"gridHandlerLayout.json");

按如下方式调用 createGrid 方法：

this.　gridHandler.createGrid(this,　configURL,　"　employeeGrid　","　employeeGridDiv　",　
　"　employeeGridPagingDiv　","gridOnCellClick");　

在 HTML 模板文件中，必须含有两个 div 标记，包含 ID employeeGridDiv 和 employeeGridPagingDiv（参见 下载 中提供的 gridview.html）。

为了在网格中填充数据，需要调用 populateGrid 方法，如下所示：
this. gridHandler.populateGrid();

要格式化 DataGrid 中的列（例如，您想要某些字段显示为图片链接），需要在布局中定义 formatter 属性。因此，formatDelete() 方法看上去如下所示：

formatDelete　:　function(value){　
　　
var　imagePath=this.getImageRootContext();　//　give　the　image　path　here　
return　"<img　src=\""+imagePath+"redx.gif\"\"/>";　
　　
}　

结束语

您已学习了如何使用 DojoGridHandler 通过编程的方式创建 Dojo DataGrid 小部件。您可以使用网格处理程序以最少量的代码在 Business Space 中创建具有分页功能的 DataGrid 组件。您可以在不影响代码的情况下轻松改变布局。

本文示例源代码或素材下载