zoukankan      html  css  js  c++  java
  • 使用dojo的tree

    dojo的Tree非常是灵活,可是官方站点上的样例却非常少,并且也比較分散,兴许将持续完好本样例。

    总的来说,要使用tree,要接触到三个类:"dojo/store/JsonRest","dijit/tree/ObjectStoreModel","dijit/Tree"。

    通过JsonRest异步从服务端获取数据。

    ObjectStoreModel能够设置推断当前数据是否有子结点的方法、数据中哪个属性用来作为label显示在树中,数据使用什么图标显示等。

    Tree详细显示树。

    			var usGov = new JsonRest({
    				target : "/rest/getTreeData",//获取树数据的URL
    				getChildren : function(object) {//怎样获取下级数据,这里与官方样例里的不一样,官方样例里要求返回的数据信息中要同一时候返回当前结点数据,大多数情况下这个是多余的,使用以下的程序, 服务端仅仅须要返回下级结点数据的数组就可以。
    					if (typeof object.children == "undefined") {//这段程序,推断到当本结点的数据的下级数据已经有了后,就不须要再从服务端获取了。
    						return this.query({PID:object.ID}).then(function(fullObject) {
    							return fullObject;
    						});
    					} else {
    						return object.children;
    					}
    				}
    			});
    			// create model to interface Tree to store
    			var model = new ObjectStoreModel({
    				store : usGov,
    //				query: {PID: "root"},//通常情况下这个是不须要设置的,假设不设置,从服务端获取根结点数据时将不传參数
    				mayHaveChildren : function(object) {//推断数据是否有儿子,当结点展开时是否会调用上面store中的getChildren方法,就是通过这种方法推断的
    					return !object.leaf;//本处于官方样例不一样,并非复用children属性的,程序更为清析。
    				},
    				getLabel : function(object) {//数据对象中个属性是用来显示在树结点中的。
    					return object.NAME;
    				}
    			});<pre name="code" class="javascript">			var tree = new Tree({
    				model : model,
    				persist : false,
    				showRoot : true,
    				region : 'center',//假设父容器是BorderContainer,指定树显示在该父容器中间
    				style : "overflow:hide;padding:0px;"
    			});

    
    
    本树结点第一次从服务端获取根结点的数据样例:
    <pre name="code" class="javascript">[{NAME: "US Government",
      id: "a1",ID:"1",
      leaf:false,
      children:[{
               NAME: "Congress2",
               id: "a2",
               ID:"2",
               leaf:false
              },{
               NAME: "Congress3",
               id: "a3",
               ID:"3",
               leaf:true
              }]
    }]
    
    
    </pre><pre code_snippet_id="500089" snippet_file_name="blog_20141028_20_3872161" name="code" class="javascript">展开树中Congress2结点时从服务端获取的数据样例:
    <pre name="code" class="javascript">[{ NAME: "Congress4",
         id: "a4",
          ID:"4",
          leaf:false,
          children:[{
                       NAME: "Congress6",id: "a6",ID:"6",leaf:true},
                      {NAME: "Congress7",id: "a7",ID:"7",leaf:true}]},
          {NAME: "Congress5",id: "a5",ID:"5",leaf:true}]


    
    
    特别要注意,数据中的id属性一定要有,而且不能反复,否则在结点展开的时候可能不会触发从后台获取数据的动作。


  • 相关阅读:
    BZOJ2512 : Groc
    BZOJ3644 : 陶陶的旅行计划
    BZOJ1439 : YY的问题
    BZOJ2872 : 优莱卡
    BZOJ3273 : liars
    BZOJ4133 : Answer的排队
    URAL Palindromic Contest
    ZOJ Monthly, January 2018
    BZOJ2689 : 堡垒
    2017-2018 ACM-ICPC, Central Europe Regional Contest (CERC 17)
  • 原文地址:https://www.cnblogs.com/bhlsheji/p/4093337.html
Copyright © 2011-2022 走看看