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

 

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', aisle: 'Condiments' },
{ 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*', aisle: 'Condiments' },”,”表示条件的and关系，通配符”?”,”*”表示一个或多个字符（包含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
    },
    store :treeStore,
    root :true,
    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:'吴起县', type:'county' },
     { name:'北京市', type:'Province', populiation:'921万',
         children:{_reference:'海定区'}},
     { name:'海定区', type:'city',www:' ContentPane.html', 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' }
]}
然后上面内容存为文件名为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, treeStore, typeValue) {
   var newModel = new dijit.tree.ForestStoreModel( {
    query : {
     type :typeValue
    },
    store :treeStore,
    root :true,
    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>