Dojo/dijit脚本库树视图加载_Dojo

Dojo/dijit脚本库树视图加载

dojo

Dojo/dijit脚本库树视图加载,dojo,Dojo,DojoAPI似乎没有加载到我的系统上（即8、Windows 7和IIS 7.5）。我试图通过如下链接到DojoAPI来测试这些示例 <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script> <script type="text/javascript"> dojo.require("dojo.lang.*"); dojo.re

DojoAPI似乎没有加载到我的系统上（即8、Windows 7和IIS 7.5）。我试图通过如下链接到DojoAPI来测试这些示例

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script>

<script type="text/javascript">
    dojo.require("dojo.lang.*");
    dojo.require("dojo.widget.Tree");
</script>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tutorial: Hello Dojo!</title>
    <!-- load Dojo -->
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script>

<script type="text/javascript">
  dojo.addOnLoad() {
    dojo.require("dojo.lang.*");
    dojo.require("dojo.widget.Tree");
  }
</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(){
    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>


require（“dojo.lang.*）；
require（“dojo.widget.Tree”）；

我还下载了这个库，像这样直接链接到它

<script type="text/javascript" src="dojo.js">/*_*/</script>

<script type="text/javascript">
    dojo.require("dojo.lang.*");
    dojo.require("dojo.widget.Tree");
</script>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tutorial: Hello Dojo!</title>
    <!-- load Dojo -->
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script>

<script type="text/javascript">
  dojo.addOnLoad() {
    dojo.require("dojo.lang.*");
    dojo.require("dojo.widget.Tree");
  }
</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(){
    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>

/*_*/
require（“dojo.lang.*）；
require（“dojo.widget.Tree”）；

但是得到了同样的结果。库脚本不会加载treeview。dojo Library 1.6.1的IE8、Windows 7或IIS 7.5是否存在问题

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tutorial: Hello Dojo!</title>
    <!-- load Dojo -->
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script>

<script type="text/javascript">
  dojo.addOnLoad() {
    dojo.require("dojo.lang.*");
    dojo.require("dojo.widget.Tree");
  }
</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(){
    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>

你知道有一个具有这种功能的树视图吗：MySQL数据库支持、上下文菜单、添加/删除节点、树中超链接支持

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tutorial: Hello Dojo!</title>
    <!-- load Dojo -->
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script>

<script type="text/javascript">
  dojo.addOnLoad() {
    dojo.require("dojo.lang.*");
    dojo.require("dojo.widget.Tree");
  }
</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(){
    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>

谢谢。

您需要在

dojo.addOnLoad

函数中包装

dojo.require

调用。这是使用Dojo跨域构建时所必需的

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tutorial: Hello Dojo!</title>
    <!-- load Dojo -->
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script>

<script type="text/javascript">
  dojo.addOnLoad() {
    dojo.require("dojo.lang.*");
    dojo.require("dojo.widget.Tree");
  }
</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(){
    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>

更多信息请访问

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tutorial: Hello Dojo!</title>
    <!-- load Dojo -->
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script>

<script type="text/javascript">
  dojo.addOnLoad() {
    dojo.require("dojo.lang.*");
    dojo.require("dojo.widget.Tree");
  }
</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(){
    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>

完成DojoAPI未加载的HTML文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Tutorial: Hello Dojo!</title>
    <!-- load Dojo -->
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js"></script>

<script type="text/javascript">
  dojo.addOnLoad() {
    dojo.require("dojo.lang.*");
    dojo.require("dojo.widget.Tree");
  }
</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(){
    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>


教程：你好，Dojo！
dojo.addOnLoad（）{
require（“dojo.lang.*）；
require（“dojo.widget.Tree”）；
}
var treeDat={
树节点：[
{标题：“世界”}，
{标题：“商业”，
儿童：[
{标题：“新闻”，
儿童：[
{标题：“主要”}，
{标题：“公司新闻”}，
{标题：“经济”}
]
},
{标题：“市场”}，
{标题：“技术”}，
{标题：“就业与经济”}
]
},
{标题：“体育”}
]
};
var TreeBuilder={
buildTreeNodes：函数（dataObjs、treeParentNode）{
对于（var i=0；iI进行了更新，树小部件仍然没有加载。请在回答中查看完整的HTML文件。我的原始代码不正确。函数体应该包装在dojo.addOnLoad
call中。我已经修复了它。但是，从您的HTML中，我看到您使用的是非常旧的dojo版本。dojo.widget
namespace已经运行了很长时间。如果要创建树，请参阅此文档链接