感谢reedseutozte的投稿,一篇关于dijit.Tree的使用方法介绍,非常好的文章,也很能体现出Dojo的核心设计思想。作为最常用的一个控件,相信这篇文章能帮助到很多同学。再次感谢reedseutozte,为Dojo中文博客带来了第一篇投稿文章:)
概述
Dojo的dijit.tree的代码结构完全遵循MVC结构,结构非常严谨:
M:model使用了dojo基础包提供的dojo.data.itemFileReadStore(只读)或者dojo.data.itemFileWriteStore(可读写)。Tree并不直接使用Store而是通过dijit.tree.TreeStoreModel这个类将sotre和树形结构所需要的结构的进行串接。
V:view就是tree.js中定义的dijit.tree和dijit_TreeNode。这个类主要完成前台的界面渲染,以及树上节点对象之间的管理。
C:_dndSelector.js这个文件名称开始迷惑了我,后来才发现即使不使用拖拽特性,该类中的代码依然会被调用,这个类定义选中节点,删除节点,增加节点,托拽节点的操作。
网上关于tree 的资料根多,而且dojo自身也提供了丰富的样例,这里介绍一些其样例中没有涉及的一些用法。
树的懒加载(lazy load)其实懒加载本身没什么太多的问题,只是有两点需要说明
图标处理Dojo对于叶子/非叶子节点的图标处理时会做自动判断。在懒加载时由于有些节点没有加载子节点,dojo在处理这些节点的图标的时候会显示默认的叶子图标,所以这里需要重 新实现treemodel的mayHaveChildren方法,代码如下
节点加载Dojo树最大的特点就是完全可以靠数据驱动,因此节点的加载,完全可以通过往对应的 父节点的数据项中增加childran实现,参见如如下代码:
增加/删除/修改节点之前已经说过dojo的tree采用了MVC模式,因此上述操作完全可以通过对store的操作实现
1. 增加
上面的懒加载代码已经列出这里不再赘述
2. 修改:
假设需要修改的节点的treeNode对象实例为node
3. 删除
假设需要删除的节点的treeNode对象实例为node
鼠标函数上面说了很多,可以发现所有操作都需要获取树节点对应的dojo对象才可以进行。那么这个对象如何获得呢?我们知道对树的操作分为两种,左键点击或者右键菜单,鼠标点中了相对应的节点就可继续往下操作,因此下面介绍如何通过鼠标事件获得节点对象
click
rightClick
右击一般是打开菜单,这里的菜单也是dojo的,因此判断函数为
代码选中节点
托拽控制Dojo的树提供托拽功能,使用托拽功能需要在实例化tree的时候将tree的dndController属性定义为’dijit.tree.dndSource' 。betweenThreshold为0表示不允许同目录下拖动。
实际应用中我们要增加一些限制,这坐介绍两种
i)选中的对象是否允许拖拽
ii)判断目标节点是否接受正在拖拽的对象
分享到:
相关推荐
DOjo中文使用手册,Dojo中文使用手册
Dojo框架使用教程
和前一个树形菜单 大多数例子是基于 PHP 的 发现很多 dojo 学者想下载 dojo 的API…… 结论是:下不到的! 发现很多想下载一些帮助例子,在http://download.dojotoolkit.org/ 下才能找到,进去点版本,比如 ...
本例是通过DoJo完成的动态树。此树有又键功能。点右键可以增删改查树节点
dojo的完整例子,基于dojo的动态树,包含源代码和运行实例 包含数据库文件
dojo控件的使用大幅度客观解放大概发广泛广泛广泛广泛广泛
dojo异步树.js 实现异步加载节点功能
dojo0.9 使用心得 dojo学习笔记(一)-dojo.io.IO & dojo.io.BrowserIO) dojo学习笔记(三) dojo学习笔记(二) dojo.lang.array & dojo.lang.func & dojo.string.extras dojo学习笔记(六)- ContentPane ...
dojo0.9 使用心得 dojo学习笔记(一)-dojo.io.IO & dojo.io.BrowserIO) dojo学习笔记(三) dojo学习笔记(二) dojo.lang.array & dojo.lang.func & dojo.string.extras dojo学习笔记(六)- ContentPane ...
dojo0.9 使用心得 dojo学习笔记(一)-dojo.io.IO & dojo.io.BrowserIO) dojo学习笔记(三) dojo学习笔记(二) dojo.lang.array & dojo.lang.func & dojo.string.extras dojo学习笔记(六)- ContentPane ...
dojo dojo实例 dojo例子 dojo资料 dojo项目 dojo实战 dojo模块 dojo编程
dojo动态tree - dojo树 dojo动态tree - dojo树 dojo动态tree - dojo树
dojo异步树js
一、 Dojo学习笔记(1. 模块与包) 1 二、 Dojo学习笔记(2. djConfig解说) 4 三、 Dojo学习笔记(3. Dojo的基础对象和方法) 6 四、 Dojo学习笔记(4. dojo.string & dojo.lang) 9 五、 Dojo学习笔记(5. dojo.lang.array ...
dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档 dojo文档
dojo js dojo js dojo js dojo js dojo js dojo js dojo js
Dojo是一个非常强大的、面向对象的、开源的JavaScript工具箱,它为开发富客户端Ajax...学习完本书后,读者不仅能熟悉Dojo框架的使用,还能了解Ajax框架的工作原理,最重要的是,还能随心所欲地开发出自己的RIA应用。
dojo中文文档下载。dojo中文文档下载。
dojo0.9 使用心得 dojo学习笔记(一)-dojo.io.IO & dojo.io.BrowserIO) dojo学习笔记(三) dojo学习笔记(二) dojo.lang.array & dojo.lang.func & dojo.string.extras dojo学习笔记(六)- ContentPane ...
基于dojo使用ajax调用webservice,返回json格式数据,填充下拉框列表