Tree组件可以把有层次关系的数据用树状结构展现出来，就如同 Windows 系统的资源浏览器。Tree有两个模板，一个是Tree模板，一个是TreeNode模板，应该说Tree模板就是一个容器，里面有很多TreeNode.而初始化树，打开树节需要的数据，是通过dojo.data.ItemFileReadStore来提供的。dojo.data提供了封装的标准的数据存取API，作为统一的数据访问层而存在。所有的数据都是item或者item的属性。Dojo.data提供了一个基本的ItemFileReadStore类来读取JSON格式数据，而dojox提供了更多扩展，比如XmlStore,CsvStore,OpmlStore等，也可以自定义自己的store类型。
dojo.data的术语如表8-21所示。
表8-21 dojo.data的术语
名称 描述
dojo.data 传统数据库
data source 数据源
datastore 表
item 行记录
attribute 列
reference 有些类似外键依赖，但外键指向的父记录，而reference指向子记录的列表
identity 主键
query 查询条件，是一个Object类型，形如{ name: '?hite*',aisle: 'Condiments' },”,”表示条件的and关系，通配符”?”,”*”表示一个或多个字符（包含0个）
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于Javascript标准的一个子集，JavaScriptd的数据结构(如字符串、数组、对象)的表示方式恰好与JSON相同,所以JSON可以被Javascript无损的识别。它是一种简单文本格式，与XML相比，它更加易读、更少的数据冗余。下面就是一段典型的JSON格式数据，例如：
{ identifier: 'name',
items: [
{ name: 'Adobo',aisle: 'Mexican' },
{ name: 'Balsamic vinegar',
{ name: 'Worcestershire Sauce',aisle: 'Condiments' }]
}
假设该段数据存放于test.json文件，相应的Dojo datastore的声明和使用如下：
<!- 指明了datastore的类型是dojo.data.ItemFileReadStore；数据的url,请注意这里除了可以是文件路径，也可以是一段请求得到的流；以及该datastore的jsId-->
<div dojoType="dojo.data.ItemFileReadStore" jsId="pantryStore"
url="test.json"></div>
<div name="pantry_item" dojoType="dijit.form.FilteringSelect"
store="pantryStore"
searchAttr="name" value="Vinegar" autoComplete="true"
></div>
<!--声明dojoType为dijit.form.FilteringSelect的一个组件，该组件在html页面上展现形式为一个下拉框，需要有数据填充，其中store属性指向了jsId为pantryStore的一个datastore，由此把刚刚在前面定义的datastore的数据关联了起来。-->
也可以通过编程的方式读取datastore数据，例如：
/*用编程实现方式定义了一个datastore,在这里是dojo.data.ItemFileReadStore，其实还可以是其它的datastore类型，如XmlStore,CsvStore等，甚至可以是自定义的datastore类型*/
var pantryStore = new dojo.data.ItemFileReadStore({url: "pantry_items.json" } );
//自定义函数，为fetch函数做准备，用于数据处理。
var gotList = function(items,request){
var itemsList = "";
for (var i = 0; i < items.length; i++){
// getValue函数，它是由dojo.data封装的API，用于得到某个item的某个属性名称的值。
itemsList += pantryStore .getValue(items[i],"name") + " "; }
alert("All items are: " + itemsList);
}
//自定义函数，为fetch函数做准备，用于异常处理。
var gotError = function(error,request){
alert("The request to the store Failed. " + error);
}
pantryStore.fetch({onComplete: gotList,onError: gotError,query:{name:”*”}});
/*执行数据查询的语句，需要传入一些查询选项，比如在示例中出现的onComplete:在得到所有符合条件的数据后的处理函数，参数为item的列表；onError:出现异常的处理函数；query: 查询条件，是一个Object类型，形如{ name: '?hite*',”*”表示一个或多个字符（包含0个）*/
应用Tree组件创建一个树的实例需要按下步骤进行：
1．创建一个用于存储树结构数据的数据源ItemFileReadStore，创建方法如下：
function createTreeStore() {
var treeStore = new dojo.data.ItemFileReadStore( {
url :'tree.json'
});
return treeStore;
}
2．使用ForestStoreModel对store进行了包装，在tree组件多引入了一个Model层，它能够进行一些特殊处理，如：没有根结点时，会自动增加一个父结点等。创建方法如下：
var treeStore = createTreeStore();
var treeModel = new dijit.tree.ForestStoreModel( {
query : {
type :'Province'//从数据源中查询type :'Province'的数据
},
store :treeStore,
root :true,//定义根结点
rootId :"中国",
rootLabel :"中国城市列表",
childrenAttrs : [ 'children' ]
});
3．然后使用ForestStoreModel创建一个TreeModel，该TreeModel可以解析结点的子结点，它是一个递归的程序结构。创建方法如下：
function createTreeModel(item,treeStore,typeValue) {
var newModel = new dijit.tree.ForestStoreModel( {
query : {
type :typeValue
},
rooId :item,
rootLabel :item || getLabel(item),
childrenAttrs : [ 'children' ]
});
return newModel;
}
4．在页面文件中定义一个Tree，定义方法如下：
<div dojoType= "dijit.Tree" id= "tree" jsId= "tree " model= "treeModel" openOnClick= "true">
其中openOnClick= "true"表示单击结点时展开该结点的子结点。
通过上面的分析，下面创建一个动态生成树的例子，在该例中，数据源是从服务器动态获得并在前台显示。首先创建一个用于生成树型结构的数据文件，本例中用的是JSON格式的数据源，该数据内容定义的是中国的部分省市名称，文件内容定义如下：

{ identifier: 'name',label: 'name',items: [ { name:'陕西省',type:'Province',children:[{_reference:'西安'},{_reference:'延安'}] },{ name:'西安',type:'city' },{ name:'延安',type:'city',children:[{_reference:'子长县'},{_reference:'吴起县'}] },{ name:'子长县',type:'county' },{ name:'吴起县',{ name:'北京市',populiation:'921万',children:{_reference:'海定区'}},{ name:'海定区',www:' ContentPane.html',populiation:'92万'},{ name:'江苏省',children:[{_reference:'苏州市'},{_reference:'南京市'}] },{ name:'苏州市',populiation:'108 万',面积:'1,972 sq km',children:[{_reference:'昆山'},{_reference:'张家港'}] },{ name:'昆山',{ name:'张家港',{ name:'南京市',type:'city' }]}然后上面内容存为文件名为tree.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/dojo.css";@import "dojoapp/dijit/themes/tundra/tundra.css";</style> <script type="text/javascript" djConfig="parSEOnLoad: true,isDebug: true" src="dojoapp/dojo/dojo.js"></script> <script>dojo.require("dojo.data.ItemFileReadStore");dojo.require("dijit.Tree");dojo.require("dijit.layout.ContentPane");dojo.addOnLoad( function() { dojo.subscribe("tree",null,function(message) { console.log("选择的结点:" + message.node.item.name); console.log("选择的结点:" + message.node.item.populiation); dijit.byId("cc"). attr('href',message.node.item.www);//打开树结点的网页连接 dijit.byId("cc").refresh(); //在此可以调用XHR修改后台JSON数据，这样可以增加或修改树的结点 });});function createTreeStore() { var treeStore = new dojo.data.ItemFileReadStore( { url :'tree.json' }); return treeStore;}var treeStore = createTreeStore();var treeModel = new dijit.tree.ForestStoreModel( { query : { type :'Province' },store :treeStore,root :true,rootId :"中国",rootLabel :"中国城市列表",childrenAttrs : [ 'children' ]});function createTreeModel(item,typeValue) { var newModel = new dijit.tree.ForestStoreModel( { query : { type :typeValue },rooId :item,rootLabel :item || getLabel(item),childrenAttrs : [ 'children' ] }); return newModel;}</script></head><body class="tundra"> <div dojoType="dijit.Tree" id="tree" jsId="tree " model="treeModel" openOnClick="true"> </div> <div dojoType="dijit.layout.ContentPane" region="bottom" id="cc" style="background-color: #ACBFD0; height: 200px;" splitter="true"> </div></body></html>