Dojo高级Web2.0 UI组件库—Tree组件

Tree组件可以把有层次关系的数据用树状结构展现出来，就如同 Windows 系统的资源浏览器。Tree有两个模板，一个是Tree模板，一个是TreeNode模板，应该说Tree模板就是一个容器，里面有很多TreeNode.而初始化树，打开树节需要的数据，是通过来提供的。提供了封装的标准的数据存取API，作为统一的数据访问层而存在。所有的数据都是item或者item的属性。提供了一个基本的ItemFileReadStore类来读取JSON格式数据，而dojox提供了更多扩展，比如XmlStore, CsvStore, OpmlStore等，也可以自定义自己的store类型。

假设该段数据存放于文件，相应的Dojo datastore的声明和使用如下：

应用Tree组件创建一个树的实例需要按下步骤进行：

1．创建一个用于存储树结构数据的数据源ItemFileReadStore，创建方法如下：

2．使用ForestStoreModel对store进行了包装，在tree组件多引入了一个Model层，它能够进行一些特殊处理，如：没有根结点时，会自动增加一个父结点等。创建方法如下：

3．然后使用ForestStoreModel创建一个TreeModel，该TreeModel可以解析结点的子结点，它是一个递归的程序结构。创建方法如下：

4．在页面文件中定义一个Tree，定义方法如下：

其中openOnClick= “true”表示单击结点时展开该结点的子结点。
通过上面的分析，下面创建一个动态生成树的例子，在该例中，数据源是从服务器动态获得并在前台显示。首先创建一个用于生成树型结构的数据文件，本例中用的是JSON格式的数据源，该数据内容定义的是中国的部分省市名称，文件内容定义如下：

然后上面内容存为文件名为，并存放在与调用该文件的HTML页面的同一目录中，为了能够显示中文内容，应把该文件保存为UTF-8格式。
下面就是一个使用Tree的例子，实现代码如下：

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>TREE</title> <style type="text/css"> @import "dojoapp/dojo/resources/"; @import "dojoapp/dijit/themes/tundra/"; </style> <script type="text/javascript" djConfig="parseOnLoad: true, isDebug: true" src="dojoapp/dojo/"></script> <script> (""); (""); (""); ( function() { ("tree", null, function(message) { ("选择的结点:" + ); ("选择的结点:" + ); ("cc"). attr('href',);//打开树结点的网页连接 ("cc").refresh(); //在此可以调用XHR修改后台JSON数据，这样可以增加或修改树的结点  }); }); function createTreeStore() { var treeStore = new ( { url :'' }); return treeStore; } var treeStore = createTreeStore(); var treeModel = new ( { query : { type :'Province' }, store :treeStore, root :true, rootId :"中国", rootLabel :"中国城市列表", childrenAttrs : [ 'children' ] }); function createTreeModel(item, treeStore, typeValue) { var newModel = new ( { query : { type :typeValue }, store :treeStore, root :true, rooId :item, rootLabel :item || getLabel(item), childrenAttrs : [ 'children' ] }); return newModel; } </script> </head> <body class="tundra"> <div dojoType="" id="tree" jsId="tree " model="treeModel" openOnClick="true"> </div> <div dojoType="" region="bottom" id="cc" style="background-color: #ACBFD0; height: 200px;" splitter="true"> </div> </body> </html>