今天介绍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. jQuery校验validate详解(转)

    jQuery校验 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一导入js库 <script src=&q ...

  2. windows python文件拷贝到linux上执行问题

    之前在Windows下写好了一个Python脚本,运行没问题,今天在Linux下,脚本开头的注释行已经指明了解释器的路径,也用chmod给了执行权限,但就是不能直接运行脚本. 1 问题1: 报错:: ...

  3. extentreports报告插件之extentX之服务搭建(三)

    之前两个章节已经写完再extentreports报告插件与testng 的集成,但是发现 每次测试完后,生成的报告都要在单独发送,每个项目都有一份报告,如果项目多的话,管理起来就会很冗余. 这个给大家 ...

  4. C#的互操作性:缓冲区、结构、指针

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  5. C#:USB设备枚举 --转自CSDN作者:Splash

    (一)DeviceIoControl的PInvoke /* ---------------------------------------------------------- 文件名称:Device ...

  6. Java陷阱之assert关键字

    Java陷阱之assert关键字   一.概述   在C和C++语言中都有assert关键,表示断言. 在Java中,同样也有assert关键字,表示断言,用法和含义都差不多.   二.语法   在J ...

  7. C#小程序呢飞行棋设计分析

    C#小程序飞行棋,程序效果图 1.设计分析 这个程序界面大致分为四部分: ① 最上面游戏名字界面 ②信息提示区 ③游戏界面区 ④游戏操作提示区 2.分区设计实现 一.游戏界面显示区,由于只需要显示出图 ...

  8. ReactJS学习笔记(一)

    1.依赖的资源: <script type="text/javascript" src='../asset/react.js'></script>   &l ...

  9. NHibernate系列文章二十八:NHibernate Mapping之Auto Mapping(附程序下载)

    摘要 上一篇文章介绍了Fluent NHibernate基础知识.但是,Fluent NHibernate提供了一种更方便的Mapping方法称为Auto Mapping.只需在代码中定义一些Conv ...

  10. python切片操作

    序列类型是其元素被顺序放置的一种数据结构类型,这种方式允许通过下标的方式来获得某一个数据元素,或者通过指定下标范围来获得一组序列的元素.这种访问序列的方式叫做切片.字符串也可以使用切片操作.切片操作符 ...