Question

这个简单的dojo树无法加载。 dojo.require调用被添加到addOnLoad函数中。可能是什么问题？

<html>
<head>
    <meta charset="utf-8">
    <title>Programmatic Dojo Tree Demo</title>
    <!-- load Dojo -->
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"></script>

<script type="text/javascript">
var treeDat = {
    treeNodes: [
        { title:"World" },
        { title:"Business",
            children:[
                { title:"News",
                    children:[
                        { title:"Main"},
                        { title:"Company News" },
                        { title:"Economy" }
                    ]
                },
                { title:"Markets" },
                { title:"Technology" },
                { title:"Jobs and Economy" }
            ]
        },
        { title:"Sports" }
    ]
};
</script>

<script type="text/javascript">
var TreeBuilder = {
    buildTreeNodes:function (dataObjs, treeParentNode){
        for(var i=0; i<dataObjs.length;i++){
            var node =  dojo.widget.createWidget("TreeNode",{
                title:dataObjs[i].title,
                expandLevel:99,
                widgetId:(((treeParentNode)?treeParentNode.widgetId:"root_")+"_"+i)
            });
            treeParentNode.addChild(node);
            treeParentNode.registerChild(node,i);
            if(dataObjs[i].children){
                this.buildTreeNodes(dataObjs[i].children, node);
            }
        }
    },
    buildTree:function (){
        var myTreeWidget = dojo.widget.createWidget("Tree",{
            widgetId:"myTreeWidget",
            DNDMode:"between",
            DNDAcceptTypes:["myTreeWidget"]
        });
        this.buildTreeNodes(treeDat.treeNodes,myTreeWidget);
        var treeContainer = document.getElementById("myWidgetContainer");
        var placeHolder = document.getElementById("treePlaceHolder");
        treeContainer.replaceChild(myTreeWidget.domNode,placeHolder);
    }
}
function addTreeContextMenu(){
    var djWdgt = dojo.widget;
    var ctxMenu = djWdgt.createWidget("TreeContextMenu",{});
    ctxMenu.addChild(djWdgt.createWidget(
        "TreeMenuItem",{caption:"Add Child Menu Item"}));
    ctxMenu.addChild(djWdgt.createWidget(
        "TreeMenuItem",{caption:"Delete This Menu Item"}));
    document.body.appendChild(ctxMenu.domNode);
    var myTree = dojo.widget.manager.getWidgetById("myTreeWidget");
    /* Bind the context menu to the tree */
    ctxMenu.listenTree(myTree);
}

dojo.addOnLoad(function(){
    dojo.require("dojo.lang.*");
    dojo.require("dojo.widget.Tree");

    TreeBuilder.buildTree();
    addTreeContextMenu();
    });
</script>

</head>
<body>
<h1>Programmatic Dojo Tree Demo</h1>
<hr />

<div id="myWidgetContainer"
    style="width: 17em; border: solid #888 1px; height:300px;">
    <span id="treePlaceHolder"
        style="background-color:#F00; color:#FFF;">
        Loading tree widget...
    </span>
</div>

</body>
</html>

Answer 1

我认为您正在查看一些真正旧代码片段（如Dojo＆lt; 1.0中所示）。这不是你如何制作小部件。请查看http://docs.dojocampus.org/dijit/Tree以获取最新的示例。

一个简单的dojo树加载的问题

1 个答案: