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

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

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

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

Tree详细显示树。

  1. var usGov = new JsonRest({
  2. target : "/rest/getTreeData",//获取树数据的URL
  3. getChildren : function(object) {//怎样获取下级数据,这里与官方样例里的不一样,官方样例里要求返回的数据信息中要同一时候返回当前结点数据,大多数情况下这个是多余的,使用以下的程序, 服务端仅仅须要返回下级结点数据的数组就可以。
  4. if (typeof object.children == "undefined") {//这段程序,推断到当本结点的数据的下级数据已经有了后,就不须要再从服务端获取了。
  5. return this.query({PID:object.ID}).then(function(fullObject) {
  6. return fullObject;
  7. });
  8. } else {
  9. return object.children;
  10. }
  11. }
  12. });
  13. // create model to interface Tree to store
  14. var model = new ObjectStoreModel({
  15. store : usGov,
  16. // query: {PID: "root"},//通常情况下这个是不须要设置的,假设不设置,从服务端获取根结点数据时将不传參数
  17. mayHaveChildren : function(object) {//推断数据是否有儿子,当结点展开时是否会调用上面store中的getChildren方法,就是通过这种方法推断的
  18. return !object.leaf;//本处于官方样例不一样,并非复用children属性的,程序更为清析。
  19. },
  20. getLabel : function(object) {//数据对象中个属性是用来显示在树结点中的。
  21. return object.NAME;
  22. }
  23. });<pre name="code" class="javascript"> var tree = new Tree({
  24. model : model,
  25. persist : false,
  26. showRoot : true,
  27. region : 'center',//假设父容器是BorderContainer,指定树显示在该父容器中间
  28. style : "overflow:hide;padding:0px;"
  29. });
  1.  
  1.  
  1. 本树结点第一次从服务端获取根结点的数据样例:
  1. <pre name="code" class="javascript">[{NAME: "US Government",
  2. id: "a1",ID:"1",
  3. leaf:false,
  4. children:[{
  5. NAME: "Congress2",
  6. id: "a2",
  7. ID:"2",
  8. leaf:false
  9. },{
  10. NAME: "Congress3",
  11. id: "a3",
  12. ID:"3",
  13. leaf:true
  14. }]
  15. }]
  1.  
  1. </pre><pre code_snippet_id="500089" snippet_file_name="blog_20141028_20_3872161" name="code" class="javascript">展开树中Congress2结点时从服务端获取的数据样例:
  1. <pre name="code" class="javascript">[{ NAME: "Congress4",
  2. id: "a4",
  3. ID:"4",
  4. leaf:false,
  5. children:[{
  6. NAME: "Congress6",id: "a6",ID:"6",leaf:true},
  7. {NAME: "Congress7",id: "a7",ID:"7",leaf:true}]},
  8. {NAME: "Congress5",id: "a5",ID:"5",leaf:true}]
  1.  

特别要注意,数据中的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. nyoj201 作业题

    作业题 时间限制: 3000 ms  |  内存限制: 65535 KB 难度: 3   描述 小白同学这学期有一门课程叫做<数值计算方法>,这是一门有效使用数字计算机求数学问题近似解的方 ...

  2. 安装tcmalloc

    安装google-perftools:#tar zxvf google-perftools-1.6.tar.gz #cd google-perftools-1.6 #./configure#make# ...

  3. Android高级图片滚动控件,编写3D版的图片轮播器

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/17482089 大家好,好久不见了,最近由于工作特别繁忙,已经有一个多月的时间没写博 ...

  4. C++11 lambda 表达式

    C++11 新增了很多特性,lambda 表达式是其中之一,如果你想了解的 C++11 完整特性,建议去这里,这里,这里,还有这里看看.本文作为 5 月的最后一篇博客,将介绍 C++11 的 lamb ...

  5. jquery操作iframe

    query取得iframe中元素的几种方法 在iframe子页面获取父页面元素 代码如下: $('#objId', parent.document); // 搞定... 在父页面 获取iframe子页 ...

  6. Oracle存储过程procedure

    --给plsql块设置一个名称保存下来便于调用 /* Create or replace procedure 名称 As 声明变量 Begin //代码块 End; --plsql块 Declare ...

  7. Linux虚机centos6.5安装Vmware Tools步骤

    退出到windows,在虚拟机菜单栏中点击 虚拟机-> 安装 VMWARE TOOLS 子菜单 进入到Linux系统,选择系统工具-终端  命令 su root 或者 su 以root进入 挂在 ...

  8. o2o

    o2o(电子商务名词) -- 百度名片 O2O即Online To Offline(在线离线/线上到线下),是指将线下的商务机会与互联网结合,让互联网成为线下交易的前台,这个概念最早来源于美国.O2O ...

  9. 《那些事之Log4j》什么是log4j?【专题一】

    Log4j 简介 在应用程序中添加日志记录总的来说基于三个目的: 监视代码中变量的变化情况,周期性的记录到文件中供其他应用进行统计分析工作: 跟踪代码运行时轨迹,作为日后审计的依据: 担当集成开发环境 ...

  10. win32系统信息获取

    #include <Windows.h> #include "resource.h" #include <strsafe.h> PTSTR BigNumTo ...