首页 > 代码库 > 使用dojo的tree
使用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属性一定要有,并且不能重复,否则在结点展开的时候可能不会触发从后台获取数据的动作。
使用dojo的tree
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。