动态构建分层的dojo树菜单

Question

我想用这个html文件中的文件夹和子文件夹构建一个分层的dojo树菜单：

<div id="prelude"><h2>Pr&eacute;lude</h2></div>
<div id="_BaseTestsAsync_00_NUnitIsWorking_Passed">_BaseTestsAsync_00_NUnitIsWorking<br/>Yo!</div>
<div id="_BaseTestsAsync_01_TwincatisRunning_Passed"><h2><font color="darkgreen">_BaseTestsAsync_01_TwincatisRunning</font></h2></div>
<div id="_BaseTestsAsync_02_CorrectPLCModuleIsActive_Passed">_BaseTestsAsync_02_CorrectPLCModuleIsActive</div>
<div id="AsynchronousTests_read1600OutsideRange_Passed"><h2>AsynchronousTests_read1600OutsideRange</h2></div>
<div id="AsynchronousTests_readNonEmpty1600_1_Passed"><h2>AsynchronousTests_readNonEmpty1600_1</h2></div>
<div id="AsynchronousTests_readUnknownRegister_Passed">AsynchronousTests_readUnknownRegister</div>
<div id="Robustness_WriteCurrentPosition_Passed"><h2><font color="darkgreen">Robustness_WriteCurrentPosition</font></h2></div>
<div id="Robustness_WriteIllegalSpeedPosition_Passed">Robustness_WriteIllegalSpeedPosition</div>

Answer 1

require([
"dojo/_base/declare", "dojo/_base/window", "dojo/store/Memory", "dijit/tree/ObjectStoreModel", "dijit/Tree", "dojo/domReady!"
], function (declare, win, Memory, ObjectStoreModel, Tree) {
divs = document.getElementsByTagName("DIV");
s = ""

var adivs = Array.prototype.slice.call(divs);

function rootName(name, depth) {
    var lpath = name.split("_")
    var limit = 0
    if (lpath.length > depth) {
        limit = depth
    } else {
        limit = lpath.length
    }
    var s = ""
    for (m = 0; m < limit; m++) {
        s = s + lpath[m] + "_"
    }
    //console.log("3[n: " + name + "][d: " + depth + "][lp: " + lpath + "][li: " + limit + "]->[s: " + s + "]")
    return s
}

function hierarchy(arr, depth, parent) {
    var s = ""
    var arr2 = arr.map(function (a) {
        var lpath = a.id.split("_")
        var atdepth = ""
        if (lpath.length > depth) {
            atdepth = lpath[depth]
        }
        //console.log("  ***arr2[d: " + depth + "][parent: " + parent + "][ad: " + atdepth + "][id: " + a.id + "]")
        return [a, atdepth]
    });
    var groups = {};
    arr2.map(function (a) {
        if (a[1] in groups) groups[a[1]].push(a[0]);
        else {
            groups[a[1]] = [];
            groups[a[1]].push(a[0])
        }
    });

    for (key in groups) {
        //console.log("  ----groups[d: " + depth + "][k: " + key + "][gk: " + groups[key] + "][parent: " + parent + "]")
        if (groups[key] === undefined) {} else {
            if (groups[key].length == 1) {
                var label = ""
                var id = groups[key][0].id
                if (id.indexOf("ailed") >= 0) {
                    label = "<b><font color=red>" + id + "</font></b>"
                } else {
                    label = "<font color=darkgreen>" + id + "</font>"
                }
                var z = "1[d: " + depth + "][k: " + key + "][lbl: " + label + "][parent: " + parent + "], "
                s = s + z
                store3.put({
                    "id": id,
                    "label": label,
                    "type": "test",
                    "parent": parent
                })
                //console.log("  -l1-groups " + z)
            } else {
                var id = groups[key][0].id
                var branchname = rootName(id, depth + 1)
                var menuEntry = "<br/>2[d: " + depth + "][z: " + z + "][parent: " + parent + "][k: " + key + "][gkl: " + groups[key].length + "][p: " + branchname + "], "
                var below = hierarchy(groups[key], depth + 1, rootName(id, depth + 1))
                s = s + menuEntry + below
                store3.put({
                    "id": branchname,
                    "label": branchname,
                    "type": "title",
                    "parent": parent
                })
                //console.log("  -l2-groups " + menuEntry)
            }
        }
    }
    return s
}

var store3 = new Memory({
    data: [{
        "id": "world",
        "label": "Tests",
        "type": "title"
    }],
    getChildren: function (object) {
        return this.query({
            parent: object.id
        });
    }
})

hierarchy(adivs, 0, "world");

// Create the model
var myModel = new ObjectStoreModel({
    store: store3,
    query: {
        id: 'world'
    },
    labelAttr: "label"
});

// Custom TreeNode class (based on dijit.TreeNode) that allows rich text labels
var MyTreeNode = declare(Tree._TreeNode, {
    _setLabelAttr: {
        node: "labelNode",
        type: "innerHTML"
    }
});

// Create the Tree.
var tree = new Tree({
    model: myModel,
    _createTreeNode: function (args) {
        return new MyTreeNode(args);
    },
    onClick: function (item) {
        console.log("menuItem1: " + item.id)
        menuItem = item.id
        if (menuItem.length > 0) {
            divtest = document.getElementById(menuItem);
            divs = document.getElementsByTagName("DIV");
            if (divtest != null) {
                for (i = 0; i < divs.length; i++) {
                    if (divs[i].id.length == 0) {} else if (divs[i].id.indexOf("dijit") == 0) {} else if (divs[i].id.indexOf("mytree") == 0) {} else {
                        divs[i].style.display = "none";
                    }
                }
                divtest.style.display = "block";
                menuItem = "#" + menuItem
            } else {
                for (i = 0; i < divs.length; i++) {
                    if (divs[i].id.length > 1) {
                        if (divs[i].id.indexOf(menuItem) == 0) {
                            divs[i].style.display = "block";
                        } else if (divs[i].id.indexOf("dijit") == 0) {
                            divs[i].style.display = "block";
                        } else {
                            divs[i].style.display = "none";
                        }
                    } else {
                        divs[i].style.display = "block";
                    }
                }
                menuItem = ""
            }
        }
    }
});
tree.placeAt(win.body(), "first");
tree.startup();
});