dijit.tree的简单应用实例
2012-10-30 22:18
369 查看
近来项目中总部功能有几个关键页面需要用树形结构来展示相关数据,便对dojo中的tree进行了一些应用。
Dojo官网上对于dojo.tree(1.7)的介绍止步于基本方法和属性结构的介绍,在http://dojotoolkit.org/reference-guide/1.8/dijit/Tree.html#dijit-tree 中可以找到比较通俗易懂的Demo。如下图:
代码如下:
看过上面的代码,比较重要的是其中的Model对象,这个里面涉及到对数据的解析(解析出树形结构的数据),提供对tree节点的各类常用操作。
有兴趣的同学,可以去官网找有关dijit.tree.ObjectStoreModel的资料。多探讨,接下来有时间继续和大家学习tree相关的高级应用。
Dojo官网上对于dojo.tree(1.7)的介绍止步于基本方法和属性结构的介绍,在http://dojotoolkit.org/reference-guide/1.8/dijit/Tree.html#dijit-tree 中可以找到比较通俗易懂的Demo。如下图:
代码如下:
<!DOCTYPE html> <html > <head> <link rel="stylesheet" href="../_static/js/dojo/../dijit/themes/claro/claro.css"> <script>dojoConfig = {async: true}</script>
<script src='../_static/js/dojo/dojo.js'></script><script>require([
"dojo/ready", "dojo/_base/window", "dojo/store/Memory", "dijit/tree/ObjectStoreModel", "dijit/Tree" ], function(ready, win, Memory, ObjectStoreModel, Tree){ // Create test store, adding the getChildren() method required by ObjectStoreModel var myStore = new Memory({ data: [ { id: 'world', name:'The earth', type:'planet', population: '6 billion'}, { id: 'AF', name:'Africa', type:'continent', population:'900 million', area: '30,221,532 sq km', timezone: '-1 UTC to +4 UTC', parent: 'world'}, { id: 'EG', name:'Egypt', type:'country', parent: 'AF' }, { id: 'KE', name:'Kenya', type:'country', parent: 'AF' }, { id: 'Nairobi', name:'Nairobi', type:'city', parent: 'KE' }, { id: 'Mombasa', name:'Mombasa', type:'city', parent: 'KE' }, { id: 'SD', name:'Sudan', type:'country', parent: 'AF' }, { id: 'Khartoum', name:'Khartoum', type:'city', parent: 'SD' }, { id: 'AS', name:'Asia', type:'continent', parent: 'world' }, ], //方法重写,有parent和id来确定children数据 getChildren: function(object){ return this.query({parent: object.id}); } }); // 创建tree需要的核心model,其中重要的为store属性 //query相当于确定tree中的root(根节点) var myModel = new ObjectStoreModel({ store: myStore, query: {id: 'world'} }); //在页面加载完,触发此方法 ready(function(){ var tree = new Tree({ model: myModel }); //将创建好的tree节点放到body处。 tree.placeAt(win.body()); //渲染tree tree.startup(); }); });</script> </head> <body class="claro"> </body> </html>
看过上面的代码,比较重要的是其中的Model对象,这个里面涉及到对数据的解析(解析出树形结构的数据),提供对tree节点的各类常用操作。
有兴趣的同学,可以去官网找有关dijit.tree.ObjectStoreModel的资料。多探讨,接下来有时间继续和大家学习tree相关的高级应用。
相关文章推荐
- Android文本自动提示框的简单应用实例
- linux下c/c++实例之十socket简单应用
- Android深入浅出系列之实例应用—简单的手指拖动图片,图片滑来滑去显示应用Gallery和BaseAdapter以及ImageView的使用
- Binary Tree Traversals(HDU1710)二叉树的简单应用
- c#devexpres TreeList 最简单显示动态值的应用
- c# 应用事务的简单实例
- linux下c/c++实例之十socket简单应用
- Java经典编程300例之实例065 适配器模式的简单应用
- jQuery.ajax的简单应用实例
- 正则表达式的简单应用实例
- 使用nRF51822/nRF51422创建一个简单的BLE应用 ---入门实例手册(中文)之四
- JSP简单练习-数组应用实例
- jquery easyui combotree 树实例简单应用
- 自动化交互脚本Expect简单介绍及应用实例
- JSP简单练习-数组应用实例
- Perl 脚本简单应用实例-MySQL备份
- 使用nRF51822/nRF51422创建一个简单的BLE应用 ---入门实例手册(中文)之三
- AJAX简单应用实例-弹出层
- jQuery.ajax的简单应用实例 附实例下载
- java图像界面开发简单实例-JPanel应用