掌握 Dojo 工具包，第 8 部分: 明日之星 - DojoX

核心提示： 清单 7. 纯 javascript 的方式定义 DataGrid 实例dojo.addOnLoad(function(){//指定页面加载完毕后执行vargrid=newdojox.grid.DataGrid({query:{pro_no:'*'},id:'grid2&

清单 7. 纯 javascript 的方式定义 DataGrid 实例
dojo.addOnLoad(function(){　//　指定页面加载完毕后执行　
　var　grid　=　new　dojox.grid.DataGrid({　
　query:　{　pro_no:　'*'　},　
　id:　'grid2',　
　store:　jsonStore,　
　structure:　[　
　　{field:　'pro_no',　name:　'Product　Number'　},　
　　{field:　'pro',　name:　'Product'　},　
　　{field:　'min_amount',　name:　'Minimum　Amount'　},　
　　{field:　'max_amount',　name:　'Maximum　Amount'　},　
　　{field:　'avg_amount',　name:　'Average　Amount'　}　
　],rowsPerPage:　20　
　　},　'gridNode');　//　设置　grid　显示在　id　为　gridNode　的节点下　
　grid.startup();　//　启动　grid　
　});　

Grid1.2 可以通过这种方式很方便的与 dojo 容器结合在一起，动态创建页面布局。

Structure 详解

DataGrid 不仅可以创建简单的二维表格，还可以通过对 structure 的设计创建复杂的表格应用，同时还可以为每一列进行格式化或是取值。我们将 First Grid 进行简单的修改，得到 清单 8的代码。

清单 8. 修改 First Grid
　function　formatAmount(value){　
　return　'$　'　+　value;　
　}　
　function　getRange(rowIndex,　item){　
　if(!item){return　'--';}　
　var　grid　=　dijit.byId('grid');　
　var　max　=　grid.store.getValue(item,　"max_amount");　
　var　min　=　grid.store.getValue(item,　"min_amount");　
　return　max　-　min;　
　}　
　var　subrow1　=　[　
　{field:　'pro_no',　name:　'Product　Number',　rowSpan:　2　},　
　{field:　'pro',　name:　'Product',　rowSpan:　2　},　
　{field:　'min_amount',　name:　'Min.　Amount',formatter:　formatAmount,width:　'80px'　},　
　{field:　'avg_amount',　name:　'Average　Amount',formatter:　formatAmount,　rowSpan:　2　},　
　{field:　'range',　name:　'Range',get:getRange,　rowSpan:　2　}　
　];　
　var　subrow2　=　[　
　{field:　'max_amount',　name:　'Max.　Amount',formatter:　formatAmount},　
　];　
　var　layout　=　[subrow1,subrow2];