其实循环生成目录树这个方法不仅仅局限于在使用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)';
}
}, **/
总结：循环生成目录树其实不难，是个很常见的问题，主要就是理解其数据结构，需要一直循环一个数据直至其全部被解析结束。