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的更多相关文章

  1. dojo创建tree

    今天介绍dojo目录树的效果,效果如下图: HTML代码如下: <body class="claro"> <div id="rootlessTree&q ...

  2. dojo tree edit的使用[前端]

    var store = new mydata.JsonRestStore({ target: "<%=ResolveUrl("~/uieditserver.ashx" ...

  3. Dojo Tree设置默认选中项并且获得它

    先上用来生成Tree的JSON数据 [    { "id": "Root", "name": "资源目录" },    ...

  4. dojo Tree 添加、删除节点

    var tree=this.tree; var store=tree.model.store; if(this.node){ console.log(this.node) var children=t ...

  5. dojo.require()的相关理解

    Dojo 提供了一个非常强大的javascript控件库. 在使用dojo之前,用户基本上不需要具备任何基础知识. 你可以用script远程链接到dojo(dojo.js), 也可以把dojo.js下 ...

  6. 《静静的dojo》 总体教程介绍

    web2.0时代,ajax技术成为整个前端开发领域的基石.大部分的书籍.博客由此切入来介绍前端类库与框架,所以dojo往往只被当做一个ajax类库来介绍,然而仅仅以此来定位dojo,无异于管中窥豹.对 ...

  7. arcgis javascript dojo

    一.为什么说ArcGIS API for JavaScript是构建于Dojo之上的? 1. 编写ArcGIS API for JavaScript的ESRI开发者使用Dojo来简化他们的开发过程,同 ...

  8. 理解dojo.require机制

    转自:http://blog.csdn.net/dojotoolkit/article/details/5935844 Dojo 提供了一个非常强大的javascript控件库. 在使用dojo之前, ...

  9. Dojo Widget系统(转)

    Dojo 里所有的小部件(Widget)都会直接或间接的继承 dijit._Widget / dijit._WidgetBase dijit._Widget 是 dojo 1.6 和 1.6之前的版本 ...

随机推荐

  1. eclipse项目转android studio详解

    第一步:项目导入 向AS中导入项目的方法有两种(其实是一种). 方法一:是在eclipse中先导出为gradle(如图1),然后打开AS,找到项目中的gradle文件,直接导入. 方法二:直接在AS中 ...

  2. EF中的连接字符串

    映射视图是每个实体集和关联的映射中指定的可转换的可执行表示. 包括两部分: 查询视图 表示从数据库架构转到概念架构所需的规范装换 更新视图 表示从概念模型转到数据库架构所需的规范转换 如果应用程序仅用 ...

  3. (转)WCF中调用WebService出错,大家帮忙看看,回答就有分

    http://bbs.csdn.net/topics/390542345 在WCF项目里面添加了一个WebService引用,然后在我们调用这个WCF服务时,老出错,提示在 ServiceModel  ...

  4. Android入门2:从GridView控件使用到自定义Adapter

    在日常手机app的使用中,出现频率最高的便是ListView和GridView.ListView的例子是微信主界面,而GridView的例子则是支付宝的主界面,不明白的小伙伴打开手机便一目了然.然而这 ...

  5. 修改UITextfield的Placeholder字体的颜色

    - (void)viewDidLoad { [super viewDidLoad]; self.title=@"修改UITextField的placeholder字体颜色"; UI ...

  6. table不能遗露了tbody

    1.假如创建一个空表 ,然后去设置它的innerHTML,并获取表单的高度:在ie10及其他的浏览器中,会像预期一样正常被解析出来: <!DOCTYPE html> <html> ...

  7. 分享到QQ空间、新浪微博、腾讯微博的代码!

    给网页加上分享代码,借助网友的力量推广网站,目前已经很流行了 以下是网页代码 QQ空间分享代码如下: <a href="javascript:void(0);" onclic ...

  8. Small factorials Solved Problem code: FCTRL2

    import sys def fact(n): final = n while n > 1: final *= n - 1 n -= 1 return final #逻辑严谨,不要忘了retur ...

  9. 了不起的分支和循环02 - 零基础入门学习Python008

    了不起的分支和循环02 让编程改变世界 Change the world by program 上节课,小甲鱼教大家如何正确的打飞机,其要点就是:判断和循环,判断就是该是不该做某事,循环就是持续做某事 ...

  10. 微信小程序开发工具 常用快捷键

    格式调整 Ctrl+S:保存文件 Ctrl+[, Ctrl+]:代码行缩进 Ctrl+Shift+[, Ctrl+Shift+]:折叠打开代码块 Ctrl+C Ctrl+V:复制粘贴,如果没有选中任何 ...