今天介绍dojo目录树的效果，效果如下图：

HTML代码如下：

<body class="claro">

            <div id="rootlessTree" data-dojo-type="dijit/Tree"></div>

</body>

Js代码如下：

require([

    "dojo/dom",

                    "dojo/json",

                    "dojo/store/Memory",

                    "dijit/tree/ObjectStoreModel",

                    "dijit/Tree",

                    "dojo/domReady!"

], function(dom, json, Memory, ObjectStoreModel, Tree){

    var ss='[{ "id":0, "name": "test", "aa": "ss"},{"id":1,"name":"a","Fartherid":0},{"id":8,"name":"b","Fartherid":0},{"id":11,"name":"c","Fartherid":0},
{"id":237,"name":"d","Fartherid":0},{"id":238,"name":"e","Fartherid":0},{"id":82,"name":"f","Fartherid":0},{"id":233,"name":"g","Fartherid":0},
{"id":246,"name":"h","Fartherid":0},{"id":9,"name":"i","Fartherid":8},{"id":10,"name":"j","Fartherid":8},{"id":12,"name":"k","Fartherid":11},
{"id":13,"name":"l","Fartherid":11},{"id":18,"name":"1","Fartherid":11},{"id":19,"name":"12","Fartherid":11},{"id":235,"name":"m","Fartherid":233},
{"id":239,"name":"n","Fartherid":238},{"id":245,"name":"o","Fartherid":238}]';

     var dt = JSON.parse(ss);

    continentStore = new Memory({

        data: dt

    });

    continentStore.getChildren = function(object){

        return this.query({Fartherid: this.getIdentity(object)});//Fartherid为绑定的父节点id

    };

    continentModel = new ObjectStoreModel({

    store: continentStore,

    query: {id:0},                   //将该目录树绑定道节点为0的id上

    mayHaveChildren: function(item){ //如果子节点没有内容，图标就显示成文档

        console.log(item);

        if(item.id===0) return true;

        for(var i=0;i<dt.length;i++){

            if(item.id===dt[i].Fartherid) return true;

        }

        return false;

    }

    });

    var governmentTree = new Tree({

                                model: continentModel,

                                onOpenClick: true,

                                showRoot:true,                  //是否显示跟节点

                                onLoad: function(){             //加载完毕

                                    console.log("plantTree");

                                },

                                onClick: function(item){       //单击事件

                                    console.log(item);

                                },

                                persist: false

                            }, "rootlessTree");

                            governmentTree.startup();

});

dojo创建tree的更多相关文章

  1. 使用dojo的tree

    dojo的Tree非常是灵活,可是官方站点上的样例却非常少,并且也比較分散,兴许将持续完好本样例. 总的来说,要使用tree,要接触到三个类:"dojo/store/JsonRest&quo ...

  2. EasyUI 创建Tree

    tree可以被从标记创建.easyui tree应该定义在ul元素中.无序列表ul元素提供了基本tree结构.每一个li元素被产生一个tree节点,子ul元素产生父tree节点.例子:     < ...

  3. Extjs中创建Tree菜单【一】

    此篇treepanel的描写是很简单,没有太大的难度,在学习时,可以先熟悉tree的一些配置信息.属性.方法和事件. 然后先写一个简单的例子,慢慢了解从中如何实现的,然后在慢慢的深入了解,实现一些复杂 ...

  4. Creating Classes 创建类

    The dojo/_base/declare module is the foundation of class creation within the Dojo Toolkit. declare a ...

  5. Ternary Search Tree Java实现

    /** * @author Edwin Chen * */ //定义节点 class Node { //存储字符串 char storeChar; //是否完成单词 boolean isComplet ...

  6. XHR 框架与 Dojo( xhrGet,xhrPut,xhrDelete)

    总结 本文介绍了 Dojo 中三种浏览器与服务器交互的方式,这三种方式各有优缺点,但是在使用方式却出奇的一致: xhr 框架的函数,dojo.io.iframe.dojo.io.script 对象的函 ...

  7. EasyUI Editable Tree

    效果如图: Create Tree <ul id="tt"></ul> $('#tt').etree({ url: 'tree_data.json', cr ...

  8. 依赖layui form模块 复选框tree插件（拓展可根据属性单选还是多选，数据反选）

    近些天接的项目用的是layui.以前没用过,踩了很多坑,坑就不多说了,直接说layui的tree.因为自带的tree不满足需求,所以在论坛.博客上找了很久终于找到了可以复选的的插件,原文地址:http ...

  9. 使用 Dojo 掌握面向对象开发

    原文出处:Joe Lennon 从头开始学习 Dojo,第 2 部分 使用 Dojo 掌握面向对象开发 什么是面向对象开发? 面向对象编程(Object-Oriented Programming,OO ...

随机推荐

  1. Windows动态库学习心得

    最近在工作中需要给项目组其他成员提供调用函数,决心抛弃以前“拷贝头文件/源文件”的简陋方法,采用动态库的方式对自己开发的接口进行模块化管理.因之前一直没有机会从事Windows动态库的开发,现借助这个 ...

  2. Swift版的SQLiteHelper

    SQLiteHelper 创建SQLiteHelper类 /// SQLite数据库处理帮助类 /// /// 此类中封装了关于SQLite数据库处理的业务函数 class SQLiteHelper ...

  3. javascript_this的用法

    javascript : this的用法 1.this代表全局对象 2.作为函数对象的公共方法(new对象后,可以调用带this关键字的属性) 总结:如果在javascript语言里没有通过new(包 ...

  4. JavaScript简介及示例

    JavaScript简介及使用 一.简介 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛 ...

  5. sqlserver如何关闭死锁进程.

    1.首先我们需要判断是哪个用户锁住了哪张表. --查询被锁表 select request_session_id spid,OBJECT_NAME(resource_associated_entity ...

  6. location.hash详解

    一.#的涵义 #代表网页中的一个位置.其右面的字符,就是该位置的标识符.比如, http://www.example.com/index.html#print 就代表网页index.html的prin ...

  7. Linux内核分析总结

    张潇月 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 学习目录: (1)计算机是如何工作的   h ...

  8. 通过浏览器https能够访问SVN，但eclipse SVN,tortoiseSVN始终连接不上SVN的问题解决方案

    为了便于本地代码维护,特意在本地搭建了一个visualSVN服务器用于本地代码管理,但是最近突然出现问题,eclipse上的SVN资源库始终连接不上,提示 "svn: connection ...

  9. 《Benign and maligenant breast tumors classification based on region growing and CNN segmentation》翻译阅读与理解

    注明:本人英语水平有限,翻译不当之处,请以英文原版为准,不喜勿喷,另,本文翻译只限于学术交流,不涉及任何版权问题,若有不当侵权或其他任何除学术交流之外的问题,请留言本人,本人立刻删除,谢谢!! 另:欢 ...

  10. JS 中 new 操作符

    按照javascript语言精粹中所说,如果在一个函数前面带上new来调用该函数,那么将创建一个隐藏连接到该函数的prototype成员的新对象,同时this将被绑定到那个新对象上.这个话很抽象,我想 ...