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

核心提示： Store 的使用DataGrid 使用了 Store 作为数据源，在以上的例子中，掌握 Dojo 工具包，第 8 部分: 明日之星 - DojoX(9)，我们都是将数据写在 javascript 中然后作为 data 参数值传给 Store 的构造方法，但是在大多数情况下，将其添加到了 id

Store 的使用

DataGrid 使用了 Store 作为数据源，在以上的例子中，我们都是将数据写在 javascript 中然后作为 data 参数值传给 Store 的构造方法。但是在大多数情况下，数据是要动态的通过 Ajax 请求从服务器端获取的，这同样可以通过 Store 来实现。我们仅需要将声明 Store 对象时传入请求的 url 地址即可，如：new dojo.data.ItemFileReadStore({url: 'jsondata.txt' }) 。Store 包括 dojo.data.ItemFileReadStore 和 dojo.data.ItemFileWriteStore 两个类。我们在使用 DataGrid 的编辑功能时需要使用 ItemFileWriteStore 来作为数据源。下面就演示了一个多功能的 DataGrid，这个 Grid 使用外部数据源，可以对单元格进行编辑，并且可以通过右击表头弹出列选菜单。为了页面能够正确，清单 10载入了所需的 CSS。

清单 10. 加载所需 CSS
　<style　type="text/css">　
　@import　"dojox/grid/resources/tundraGrid.css";　
　@import　"dijit/themes/tundra/tundra.css";　
　@import　"dojo/resources/dojo.css";　
　</style>　

清单 11的代码引入了所需的 dojo 包，并创建了可编辑的 DataGrid，将其添加到了 id 为 gridNode 的页面节点中。为了使列具有编辑功能只需要在 structure 定义中的表示该列的 JSON 定义中添加值为 true 的 editable 属性。

清单 11. 引入所需 Dojo 包
　<script　type="text/javascript"　src="dojo/dojo.js"　djConfig="parseOnLoad:　true"></script>　
　<script　type="text/javascript">　
　dojo.require("dojo.data.ItemFileWriteStore");　
　dojo.require("dojox.grid.DataGrid");　
　//　下面两个包用来创建右键弹出菜单　
　dojo.require("dijit.Menu");　
　dojo.require("dojox.widget.PlaceholderMenuItem");　
　//　使用　dataGrid.txt　中的数据作为填充　DataGrid　的数据　
　var　jsonStore　=　new　dojo.data.ItemFileWriteStore({　url:'dataGrid.txt'});　
　var　layout　=　[　
　{feld:　'emp_no',　name:　'Employee　Number'},　
　{field:　'name',　name:　'Name',　editable:　true　},　//　该列可编辑　
　{field:　'gender',　name:　'Gender',　editable:true,　
　type:dojox.grid.cells.Select,　options:['F','M']　},　//　编辑该列时使用下拉菜单　
　{field:　'dept_no',　name:　'Deptment　Number',　editable:true,　
　type:dojox.grid.cells.Select,　options:['730','731','732','733','734','735']},　
　{field:　'bonus',　name:　'Bonus',　editable:　true　}　
　];　
　dojo.addOnLoad(function(){　
　var　grid　=　new　dojox.grid.DataGrid({　
　query:　{　emp_no:　'*'　},　//　查询字符串　
　id:　'grid2',　　　　　　//DataGrid　的　id　
　autoWidth:true,　　　　//　自动调整宽度　
　store:　jsonStore,　　　　//　使用　jsonStore　对象　
　structure:　layout,　　　　//　使用　layout　对象定义的结构　
　rowsPerPage:　20,　　　　//　每页读取　20　条记录，保证　Web　浏览器的性能　
　headerMenu:　gridMenu　//　指定头菜单为　gridMenu　
　　},　'gridNode');　
　　grid.startup();　//grid　生效　
　　});　
　　</script>