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> (编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|