开发学院软件开发 Java 掌握 Dojo 工具包，第 8 部分: 明日之星 - DojoX 阅读

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

　2009-12-01 00:00:00　来源：WEB开发网　　　

核心提示： 在这里，我们首先定义一个 JSON 数据 sampleData，掌握 Dojo 工具包，第 8 部分: 明日之星 - DojoX(5)，这里 identifier 是对于整行的唯一标识，因此在数据中不能出现重复；数组 items 是这个表格所显示的数据，自动调整宽度，到此，其中数据必须完全符合

在这里，我们首先定义一个 JSON 数据 sampleData，这里 identifier 是对于整行的唯一标识，因此在数据中不能出现重复；数组 items 是这个表格所显示的数据，其中数据必须完全符合 JSON 的语法，字符串两端必须使用引号，否则会出现语法错误，保险的办法是所有的值均用引号括住。

接下来，我们就要在网页的 Body 元素中定义 DataGrid 实例了，如清单 4

清单 4. 定义 DataGrid 实例
　<div　id="grid"　dojoType="dojox.grid.DataGrid"　store="jsonStore"　　　structure="layout"　autoWidth="true"　></div>　

dojoType 指定了该 Web 部件为 dojox.grid.DataGrid，数据使用 jsonStore，结构为 layout，自动调整宽度。到此，第一个 Grid 就已开发完毕，完整代码如清单 5

清单 5. 完整代码
　<html>　　<head>　　<title>first　Grid</title>　　<meta　http-equiv="Content-Type"　content="text/html;　charset=utf-8"></meta>　　<style　type="text/css">　　@import　"dojox/grid/resources/tundraGrid.css";　　@import　"dojo/resources/dojo.css";　　</style>　　<script　type="text/javascript"　src="dojo/dojo.js"　djConfig="parseOnLoad:　true"></script>　　<script　type="text/javascript">　　dojo.require("dojo.data.ItemFileReadStore");　　dojo.require("dojox.grid.DataGrid");　　var　sampleData　=　{identifier:　'pro_no',label:　'pro_no',　　items:　[　　{pro_no:'2100',　pro:'A　Series',　min_amount:346,　max_amount:931,　avg_amount:647},　　{pro_no:'2200',　pro:'B　Series',　min_amount:301,　max_amount:894,　avg_amount:608},　　{pro_no:'2300',　pro:'C　Series',　min_amount:456,　max_amount:791,　avg_amount:532},　　{pro_no:'2400',　pro:'D　Series',　min_amount:859,　max_amount:2433,　avg_amount:1840},　　{pro_no:'2500',　pro:'E　Series',　min_amount:459,　max_amount:1433,　avg_amount:1040}　　]};　　var　jsonStore　=　new　dojo.data.ItemFileReadStore({　data:　sampleData　});　　var　layout　=　[　　{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'　}];　　</script>　　</head>　　<body　class="tundra">　　<div　class="heading">First　Grid</div>　　<div　id="grid"　dojoType="dojox.grid.DataGrid"　store="jsonStore"　　structure="layout"　autoWidth="true"></div>　　</body>　　</html>　