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)';
    }
}, **/

总结：循环生成目录树其实不难，是个很常见的问题，主要就是理解其数据结构，需要一直循环一个数据直至其全部被解析结束。