Tree组件可以把有层次关系的数据用树状结构展现出来，就如同 Windows 系统的资源浏览器。Tree有两个模板，一个是Tree模板，一个是TreeNode模板，应该说Tree模板就是一个容器，里面有很多TreeNode.而初始化树，打开树节需要的数据，是通过来提供的。提供了封装的标准的数据存取API，作为统一的数据访问层而存在。所有的数据都是item或者item的属性。提供了一个基本的ItemFileReadStore类来读取JSON格式数据，而dojox提供了更多扩展，比如XmlStore, CsvStore, OpmlStore等，也可以自定义自己的store类型。
术语
| 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', aisle: 'Condiments' },
{ name: 'Worcestershire Sauce', aisle: 'Condiments' }]
}
|
{ identifier: 'name',
items: [
{ name: 'Adobo', aisle: 'Mexican' },
{ name: 'Balsamic vinegar', aisle: 'Condiments' },
{ name: 'Worcestershire Sauce', aisle: 'Condiments' }]
} 假设该段数据存放于文件，相应的Dojo datastore的声明和使用如下：
<!- 指明了datastore的类型是；数据的url,请注意这里除了可以是文件路径，也可以是一段请求得到的流；以及该datastore的jsId--> <div dojoType="" jsId="pantryStore" url=""></div> <div name="pantry_item" dojoType="" store="pantryStore" searchAttr="name" value="Vinegar" autoComplete="true" ></div> <!--声明dojoType为的一个组件，该组件在html页面上展现形式为一个下拉框，需要有数据填充，其中store属性指向了jsId为pantryStore的一个datastore，由此把刚刚在前面定义的datastore的数据关联了起来。--> 也可以通过编程的方式读取datastore数据，例如： /*用编程实现方式定义了一个datastore,在这里是，其实还可以是其它的datastore类型，如XmlStore,CsvStore等，甚至可以是自定义的datastore类型*/ var pantryStore = new ({url: "pantry_" } ); //自定义函数，为fetch函数做准备，用于数据处理。 var gotList = function(items, request){ var itemsList = ""; for (var i = 0; i < ; i++){ // getValue函数，它是由封装的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); } ({onComplete: gotList, onError: gotError,query:{name:”*”}});/*执行数据查询的语句，需要传入一些查询选项，比如在示例中出现的onComplete:在得到所有符合条件的数据后的处理函数，参数为item的列表；onError:出现异常的处理函数；query: 查询条件，是一个Object类型，形如{ name: '?hite*', aisle: 'Condiments' },”,”表示条件的and关系，通配符”?”,”*”表示一个或多个字符（包含0个）*/
应用Tree组件创建一个树的实例需要按下步骤进行：
1．创建一个用于存储树结构数据的数据源ItemFileReadStore，创建方法如下：
function createTreeStore() {var treeStore = new ( {url :''});return treeStore; }
2．使用ForestStoreModel对store进行了包装，在tree组件多引入了一个Model层，它能够进行一些特殊处理，如：没有根结点时，会自动增加一个父结点等。创建方法如下：
var treeStore = createTreeStore();var treeModel = new ( {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 ( {query : {type :typeValue},store :treeStore,root :true,rooId :item,rootLabel :item || getLabel(item),childrenAttrs : [ 'children' ]});return newModel; }
4．在页面文件中定义一个Tree，定义方法如下：
<div dojoType= "" 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:'吴起县', type:'county' },{ name:'北京市', type:'Province', populiation:'921万',children:{_reference:'海定区'}},{ name:'海定区', type:'city',www:' ', populiation:'92万'},{ name:'江苏省', type:'Province',children:[{_reference:'苏州市'}, {_reference:'南京市'}] },{ name:'苏州市', type:'city', populiation:'108 万', 面积:'1,972 sq km',children:[{_reference:'昆山'}, {_reference:'张家港'}] },{ name:'昆山', type:'county' },{ name:'张家港', type:'county' },{ name:'南京市', type:'city' }
]} 然后上面内容存为文件名为，并存放在与调用该文件的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>
![[one day one question] webpack打包压缩 ES6 js、.vue报错](http://pic.xiahunao.cn/[one day one question] webpack打包压缩 ES6 js、.vue报错)
![[one day one question] safari缓存太厉害](http://pic.xiahunao.cn/[one day one question] safari缓存太厉害)
![[one day one question] express 不缓存如何实现](http://pic.xiahunao.cn/[one day one question] express 不缓存如何实现)
![[工具库]JFileDownloader工具类——多线程下载网络文件，并保存在本地](http://pic.xiahunao.cn/[工具库]JFileDownloader工具类——多线程下载网络文件，并保存在本地)
