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

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>