dojo里添加目录树
其实循环生成目录树这个方法不仅仅局限于在使用dojo的情况下,只要明白了其中的原理,在任何一种语言下都能动态循环生成。
1. 数据结构
在这里先说明一下数据结构,我这里循环生成目录树的数据结构是像这样的:
{
“rootName”:“根目录”, "id": 0, "isFolder": 1, "childRoot": [
“rootName”:“一级目录”, "id": 1,"isFolder": 1, "childRoot": [
“rootName”:“二级目录”, "id": 2,"isFolder": 1, "childRoot": [
"rootName": "子文件", "id": 3,"isFolder": 0, "childRoot": [],
"rootName": "子文件", "id": 4, "isFolder": 0, "childRoot": [],
"rootName": "子文件", "id": 5, "isFolder": 0, "childRoot": []
]
]
“rootName”:“一级目录”, "id": 6, "isFolder": 1, "childRoot": [
"rootName": "子文件", "id": 8, "isFolder": 0, "childRoot": [],
"rootName": "子文件", "id": 9, "isFolder": 0, "childRoot": [],
"rootName": "子文件", "id": 10,"isFolder": 0, "childRoot": []
]
“rootName”:“一级目录”, "id": 11,"isFolder": 1, "childRoot": [
]
]
}
当然,对于数据每个人都有不同的写法,这里最重要也是最值得关注的一点就是每一层的“childRoot”这个数组下还有没有数据存在,若是有的话则继续循环生成目录或文件,若是没有,则循环结束,继续下一轮的循环,直至结束。其中,rootName表示这一层的目录树名,"isFolder"用于判断这一层是文件夹还是文件,也可以通过"childRoot"的length来判断,我这里是为了简单调用,若是在不清楚文件有多少层的情况下,建议使用"childRoot"的length来判断所属。
2.html界面和js语法
2.1 html界面
HTML界面没有什么需要过多阐述,因为是动态生成(并且我这边是在另外一个widgetx下依附的),所以直接添加一个div即可,如下:
<div class="catalog-item" data-dojo-attach-point="catalogItem"> </div>
2.2 JS界面
JS界面就只需要获取到HTML中定义的div,再在获取到的div下循环生成目录树即可。如下:
postCreate: function() {
this.inherited(arguments);
var ItemContent = this.catalogItem;
if(this.configData.length > 0){
//这里的configData是从上一层传过来的,也就是我们写在config里面数据,因为篇幅的关系,就不把那部分贴上来了。ItemContent也是获取到的div。
this._createAccordionCatalog(this.configData, ItemContent);
} else {
alert("没有数据!");
} }, _createAccordionCatalog: function (datasource, parentContent) {
arrayUtil.forEach(datasource, function (itemData) {
if (!!Number(itemData.isGroup)) {
//有子元素则创建branch
this._createBranchCatalog(itemData, parentContent);
} else {
// 没有子元素则创建leaf
this._createLeafCatalog(itemData, parentContent);
}
}, this);
},
// 这里,因为项目里的需求,我需要往里面添加额外的组件
// 将其他的部分注释掉,以符合这里数据结构
_createBranchCatalog: function(itemData, parentContent){
var i = 0 ;
i += i;
var container = domCon.create('div',{class:'branch-catalog ',style:'cursor:pointer ;margin-left:' +(i*7)+'%'},parentContent); if(itemData.id === 1){
// var dropContainer = domCon.create('img',{class:'dropContainer',id: 'firstDrop', src: itemData.drop, style:'width:10px;height: 10px; vertical-align: middle; margin-top:2%'},container);
// var space = domCon.create('img',{style: 'width:3px'},container);
// var wjjContainer = domCon.create('img',{class: "wjjContainer",id:"Folder", src: itemData.photo ,style: 'width:15px ;height:15px;vertical-align: middle; margin-top:2%'},container);
// var space = domCon.create('img',{style: 'width:3px'},container);
var nameContainer = domCon.create('span',{class: "nameContainer",id:"firstNameNode",innerHTML:itemData.name, style:'position:absolute;font-size: 12px;vertical-align: middle; margin-top:2%'},container);
}
if(itemData.id !== 1){
// var dropContainer = domCon.create('img',{class:'dropContainer',id: 'firstDrop', src: itemData.drop, style:'width:10px;height: 10px; vertical-align: middle; margin-top:4%'},container);
// var space = domCon.create('img',{style: 'width:3px'},container);
// var wjjContainer = domCon.create('img',{class: "wjjContainer",id:"Folder", src: itemData.photo ,style: 'width:12px ;height:12px; vertical-align: middle;margin-top:4%'},container);
// var space = domCon.create('img',{style: 'width:3px'},container);
var nameContainer = domCon.create('span',{class: "nameContainer",id:"firstNameNode",innerHTML:itemData.name, style:'position:absolute;font-size: 12px;vertical-align: middle; margin-top:2%'},container);
// var shancContainer = domCon.create('img',{class: "shancContainer",id:"firstDelete", src: itemData.delete,style: 'width:20px ;height:20px ;float: right'},container);
// var inputContainer = domCon.create('input',{type: 'file', style: "display: none;float: right;"}, container);
// this.isInputContainer = inputContainer;
// var shucContainer = domCon.create('img',{class: "shucContainer",id:"firstOutput", onclick:'document.execCommand(\'SaveAs\');', src: itemData.output,style: 'width:12px ;height:12px ;float: right'},container);
// on(shucContainer, 'click', lang.hitch(this, this._outputData));
}
/ **if(itemData.childAccordion.length > 0){
var content = domCon.create('div', {class: 'content',style:'cursor:pointer ;margin-left:' +((i+1)*7)+'%'}, container);
var childAccordion = domCon.create('div', {class: 'accordion transition '}, content);
this._createAccordionCatalog(itemData.childAccordion, childAccordion);
} else {
dropContainer.style.visibility = "hidden";
} on(dropContainer,'click', lang.hitch(this, function (e) {
this._changeDirection(e, dropContainer);
})); **/
}, _createLeafCatalog: function(itemData, parentContent){
var leafItem = domCon.create('div', {class: 'item bounce-to-right', style: 'cursor:pointer;margin-left:7%'}, parentContent);
// var leafCont = domCon.create('img', {class: 'wjContainer',src: itemData.photo ,style: 'width:12px ;height:12px; vertical-align: middle; margin-top:3%'}, leafItem);
// var space = domCon.create('img',{style: 'width:3px'},leafItem);
var topicName = domCon.create('span', {class: 'topic-name', innerHTML: itemData.name, style:'position:absolute;font-size: 10px;vertical-align: middle; margin-top:2%'}, leafItem); }, // 改变下拉框的方向
/** _changeDirection: function (e, dropContainer) {
console.log(e); console.log(dropContainer);
var dataLength = e.path[1].childNodes.length;
var hideDiv = e.path[1].childNodes[dataLength - 1];
if(hideDiv.style.display === ""){
hideDiv.style.display = "none";
dropContainer.style.transform = 'rotate(-90deg)';
} else if(hideDiv.style.display === "none"){
hideDiv.style.display = "block";
dropContainer.style.transform = 'rotate(0deg)';
} else if(hideDiv.style.display === "block"){
hideDiv.style.display = "none";
dropContainer.style.transform = 'rotate(-90deg)';
}
}, **/ 总结:循环生成目录树其实不难,是个很常见的问题,主要就是理解其数据结构,需要一直循环一个数据直至其全部被解析结束。
dojo里添加目录树的更多相关文章
- 【手撸一个ORM】第四步、Expression(表达式目录树)扩展
到这里,Orm的基架已经搭起来了,接下来就是激动人心的部分,表达式目录树转Sql语句,SqlDataReader转数据实体等等,但是在这之前,我们需要扩展下表达式目录树的方法,以方便后面的相关操作. ...
- Asp.net MVC 如何向webform一样在IIS里添加虚拟目录
相信很多用webform的程序猿都习惯性的使用虚拟目录的形式来对一个程序添加新的功能,那么在mvc下该如何来弄呢? 首先得有一个项目基层的项目,然后我们在这个项目的基础上新增一个功能模块,例如信息发布 ...
- 【专家坐堂Q&A】在 petalinux-config 中选择外部来源时,可将符号链路添加内核来源目录树
问题描述 作为 petalinux-config 菜单的一部分,现在可以将 Linux 内核指定为外部来源. 如果选择了该选项,可为内核来源目录树添加两个符号链路. 这会带来两个问题: 1. 符号链路 ...
- 原创的基于HTML/CSS/JavaScript的层级目录树
之前参加过一些基于HTML/CSS/JavaScript的项目,当在页面中需要生成一颗目录树时,总是首先想着网上有没有现成的生成树的源代码,比如dtree.zthee,或者使用一些javascript ...
- linux学习心得之目录树开端与/etc(图文)
linux学习心得之目录树开端与/etc(图文) linux中“一切皆文件”,学习linux一年了,在学习过程中对目录树的一点心得,分享给大家,有不对的地方敬请斧正. 不多说了,先上图: 根目录: / ...
- MVC图片上传详解 IIS (安装SSL证书后) 实现 HTTP 自动跳转到 HTTPS C#中Enum用法小结 表达式目录树 “村长”教你测试用例 引用provinces.js的三级联动
MVC图片上传详解 MVC图片上传--控制器方法 新建一个控制器命名为File,定义一个Img方法 [HttpPost]public ActionResult Img(HttpPostedFile ...
- Android原生PDF功能实现:PDF阅读、PDF页面跳转、PDF手势伸缩、PDF目录树、PDF预览缩略图
1.背景 近期,公司希望实现安卓原生端的PDF功能,要求:高效.实用. 经过两天的调研.编码,实现了一个简单Demo,如上图所示. 关于安卓原生端的PDF功能实现,技术点还是很多的,为了咱们安卓开发的 ...
- 05.表达式目录树Expression
参考文章 https://www.cnblogs.com/xyh9039/p/12748983.html 1. 基本了解 1.1 Lambda表达式 演变过程 using System; namesp ...
- visual studio 2019工具里添加开发中命令提示符的方法
最新新装了visual studio 2019,发现默认的没有开发者命令提示符 现将添加步骤描述如下: 从VS2019菜单选择"Tools",然后选择"外部工具" ...
随机推荐
- 离线安装expect
expect依赖tcl库 安装包: https://files.cnblogs.com/files/tozh/tcl8.4.11-src.tar.gz https://files.cnblogs.co ...
- sql注入-输入’or 1=1#
比如:在用户名输入框中输入:’or 1=1#,密码随便输入,这时候的合成后的SQL查询语句为: select * from users where username='' or 1=1#' a ...
- VLC播放器
为了将多个视频放在一个窗口,最开始想用的是windows media player ,6个视频,把整个电脑卡得不动了(显卡太弱,是多输出口的,没法换),于是又想把视频压缩成一个,网上的大部分软件要收费 ...
- TCL 引用同目录下其他脚本文件--source
方法一: source [file join [file dirname [info script]] Export_inp_by_loadstep.tcl] 方法二: source [file jo ...
- PRBS
PRBS是Pseudo Random Binary Sequence的缩写,即“伪随机二进制序列”的意思.PRBS码具有“随机”特性,是因为在PRBS码流中,二进制数“0”和“1”是随机出现的,但是它 ...
- pdf.js的使用
下载地址: files.cnblogs.com/zycjwdss/mypdf.zip 把下载后的zip解压,放到web服务器根目录下,打开pdf.html,把这一句取消注释: //window.pd ...
- redis4.0.13主从、哨兵、集群3种模式的 Server端搭建、启动、验证
本文使用的是redis-4.0.13.tar.gz版本. 两个centos7系统虚拟机:192.168.10.140.192.168.10.150 redis各版本下载地址:http://downlo ...
- 课上补做:用C语言编程实现ls命令
课上补做:用C语言编程实现ls命令 一.有关ls ls :用来打印当前目录或者制定目录的清单,显示出文件的一些信息等. ls -l:列出长数据串,包括文件的属性和权限等数据 ls -R:连同子目录一同 ...
- gevent-websocket初识
初试 from flask import Flask, request from geventwebsocket.handler import WebSocketHandler from gevent ...
- Nuget调用简单封装.
1. 项目引用Dapper作为直接访问, 为了使用方便, 封装一下.达到效果: - 数据库连接配置在webconfig.xml中. - 常用调用方法封装. 调用: //可以采用单例模式. //全局实 ...