dojo创建tree
今天介绍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的更多相关文章
- 使用dojo的tree
dojo的Tree非常是灵活,可是官方站点上的样例却非常少,并且也比較分散,兴许将持续完好本样例. 总的来说,要使用tree,要接触到三个类:"dojo/store/JsonRest&quo ...
- EasyUI 创建Tree
tree可以被从标记创建.easyui tree应该定义在ul元素中.无序列表ul元素提供了基本tree结构.每一个li元素被产生一个tree节点,子ul元素产生父tree节点.例子: < ...
- Extjs中创建Tree菜单【一】
此篇treepanel的描写是很简单,没有太大的难度,在学习时,可以先熟悉tree的一些配置信息.属性.方法和事件. 然后先写一个简单的例子,慢慢了解从中如何实现的,然后在慢慢的深入了解,实现一些复杂 ...
- Creating Classes 创建类
The dojo/_base/declare module is the foundation of class creation within the Dojo Toolkit. declare a ...
- Ternary Search Tree Java实现
/** * @author Edwin Chen * */ //定义节点 class Node { //存储字符串 char storeChar; //是否完成单词 boolean isComplet ...
- XHR 框架与 Dojo( xhrGet,xhrPut,xhrDelete)
总结 本文介绍了 Dojo 中三种浏览器与服务器交互的方式,这三种方式各有优缺点,但是在使用方式却出奇的一致: xhr 框架的函数,dojo.io.iframe.dojo.io.script 对象的函 ...
- EasyUI Editable Tree
效果如图: Create Tree <ul id="tt"></ul> $('#tt').etree({ url: 'tree_data.json', cr ...
- 依赖layui form模块 复选框tree插件（拓展可根据属性单选还是多选，数据反选）
近些天接的项目用的是layui.以前没用过,踩了很多坑,坑就不多说了,直接说layui的tree.因为自带的tree不满足需求,所以在论坛.博客上找了很久终于找到了可以复选的的插件,原文地址:http ...
- 使用 Dojo 掌握面向对象开发
原文出处:Joe Lennon 从头开始学习 Dojo,第 2 部分 使用 Dojo 掌握面向对象开发 什么是面向对象开发? 面向对象编程(Object-Oriented Programming,OO ...
随机推荐
- GHOST(幽灵)重大漏洞
cd /usr/local/srcwget https://webshare.uchicago.edu/orgs/ITServices/itsec/Downloads/GHOST.cgcc GHOST ...
- LRU implement Data Structure analysis
三种数据结构实现的LRU对比分析: 自适应循环链表, 跳表 和 伸展树 对比发现 : 跳表比其他两个会好一些(命中率) 来自论文 Performance Analysis of LRU
- iptables--简单的防火墙
iptables--简单的防火墙 如果你执行iptables --list你将看到防火墙上的可用规则.下例说明当前系统没有定义防火墙,你可以看到,它显示了默认的filter表,以及表内默认的input ...
- 跨域访问CORS
由于现代浏览器的同源策略,合理的跨域请求也变得至关重要. CORS(Cross-Origin Resource Sharing,跨域资源共享)定义了在必须访问跨域资源时,浏览器与服务器应该如何沟通.它 ...
- 网页手机wap2.0网页的head里加入下面这条元标签......
网页手机wap2.0网页的head里加入下面这条元标签,在iPhone的浏览器中页面将以原始大小显示,并不允许缩放. <meta name="viewport" conten ...
- php 判断文件或目录是否存在
判断文件或目录是否存在有自带的函数 file_exists:文件是否存在 $file = "check.txt"; if(file_exists($file)) { ech ...
- 【ORM】--FluentNHibernate之AutoMapping详解
上篇文章详细讨论了FluentNHibernate的基本映射的使用方法,它的映射基本用法是跟NHibernate完全一样的,首先要创建数据库链接配置文件,然后编写Table的Mappin ...
- Mysql 相关字段类型长度
1. Compact行记录是在MySQL 5.0时被引入的,其设计目标是能高效存放数据. 2. Redundant是MySQL 5.0版本之前InnoDB的行记录存储方式. 3. InnoDB存 ...
- thinkPHP--CURD操作
1.数据创建 2.数据写入 3.数据读取 4.数据更新 5.数据删除 一．数据创建 在数据库添加等操作之前,我们首先需要对数据进行创建.何为数据创建,就是接受提 交过来的数据,比如表单提交的 POST ...
- js关于页面坐标api
网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...