Dojo树使用心得

感谢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方法，代码如下

[javascript] view plain copy

1. vartreeModel=newdijit.tree.ForestMode({
2. .......
3. });
4. treeModel.mayHaveChildren=function(item)
5. {
6. //item为对应节点的数据项，该函数返回true表示该节点为非叶子节点，dojo就会为这个节点附着上非叶子图标
7. if(item.root)
8. {
9. returntrue;
10. }
11. else
12. //这里认为初始化树的时候对于每一个节点的数据项中都有type属性，根据属性判断
13. return(treeModel.store.getValue(item,'type')!='xxxx')
14. }
15. }

节点加载
Dojo树最大的特点就是完全可以靠数据驱动，因此节点的加载，完全可以通过往对应的 父节点的数据项中增加childran实现，参见如如下代码：
copy