使用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的更多相关文章
- dojo创建tree
今天介绍dojo目录树的效果,效果如下图: HTML代码如下: <body class="claro"> <div id="rootlessTree&q ...
- dojo tree edit的使用[前端]
var store = new mydata.JsonRestStore({ target: "<%=ResolveUrl("~/uieditserver.ashx" ...
- Dojo Tree设置默认选中项并且获得它
先上用来生成Tree的JSON数据 [ { "id": "Root", "name": "资源目录" }, ...
- dojo Tree 添加、删除节点
var tree=this.tree; var store=tree.model.store; if(this.node){ console.log(this.node) var children=t ...
- dojo.require()的相关理解
Dojo 提供了一个非常强大的javascript控件库. 在使用dojo之前,用户基本上不需要具备任何基础知识. 你可以用script远程链接到dojo(dojo.js), 也可以把dojo.js下 ...
- 《静静的dojo》 总体教程介绍
web2.0时代,ajax技术成为整个前端开发领域的基石.大部分的书籍.博客由此切入来介绍前端类库与框架,所以dojo往往只被当做一个ajax类库来介绍,然而仅仅以此来定位dojo,无异于管中窥豹.对 ...
- arcgis javascript dojo
一.为什么说ArcGIS API for JavaScript是构建于Dojo之上的? 1. 编写ArcGIS API for JavaScript的ESRI开发者使用Dojo来简化他们的开发过程,同 ...
- 理解dojo.require机制
转自:http://blog.csdn.net/dojotoolkit/article/details/5935844 Dojo 提供了一个非常强大的javascript控件库. 在使用dojo之前, ...
- Dojo Widget系统(转)
Dojo 里所有的小部件(Widget)都会直接或间接的继承 dijit._Widget / dijit._WidgetBase dijit._Widget 是 dojo 1.6 和 1.6之前的版本 ...
随机推荐
- OCP-1Z0-051-题目解析-第28题
28. Which two statements are true regarding constraints? (Choose two.) A. A foreign key cannot cont ...
- angularjs基本执行流程
近期温习了下angularjs执行流程,备记下.以便查看. 主要的执行流程例如以下: 1.用户请求应用起始页. 2.用户的浏览器向server发起一次HTTP连接,然后载入index.html页面,这 ...
- 针对淡入淡出的定时轮播效果js
如果不使用jquery的fadeIn和fadeOut的接口和不适用animate情况下,如果要做用js实现淡入淡出轮播效果,我所想到的办法就是使用css3新特性transition(注意好兼容性). ...
- cocos2dx Menu
---恢复内容开始--- cocos2dx 3.0以后 Menu相关回调函数使用不同.现在列出当前版本可使用的方法. 看见一个说的很仔细的博客,博客源地址 http://blog.sina.com.c ...
- C#基本数据类型与C++区别
与C++不同的地方: char占两个字节存Unicode字符, long long 改为 long ; unsize ... 改为 u... 新增: byte占1个字节,类似与C++char, sby ...
- 关于毕设WiFi选型
毕设做基于WiFi的家庭灯光影音控制,现在主要是WiFi模块上的选型,自己选了ESP8266. 一开始是看到了机智云的内容,想尝试机智云.但是目前没有母版,不知道怎么下手. 接下来就先尝试通过通用类型 ...
- C# ITextSharp pdf 自动打印
PDF生成后直接进入打印预览不用下载 using iTextSharp.text; using iTextSharp.text.pdf; Document pdfDoc = new Document( ...
- 浅析 JavaScript 组件编写
之前因项目需要也编写过一些简单的JS组件,大多是基于JQuery库的,一直也没有过总结,导致再次写到的时候还去Google, 近日看到一个文章总结的挺好,拿过整理一下做个备忘. 此次同样是基于jque ...
- windows下给用非exe格式的文件安装网卡驱动
之前我只知道用驱动精灵来给新机器装网卡驱动,或者用下载好的exe格式文件给非新机器装网卡驱动. 今天下载了一个非exe格式的文件,就不知道怎么装了,百度了一下才知道,可以通过:”设备管理器“-> ...
- linux下snprintf和sprinf很少被提及的区别
函数原型:int snprintf(char *dest, size_t size, const char *fmt, ...);函数说明: snprintf函数中的第二个参数,size的解释:siz ...