前端之家收集整理的这篇文章主要介绍了
Dojo.Tree，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
<head>
<style type="text/css">
body,html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
djConfig="parSEOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.Tree");
dojo.addOnLoad(function() {
var store = new dojo.data.ItemFileReadStore({
url: "../_static/js//dijit/tests/_data/countries.json"
});
var treeModel = new dijit.tree.ForestStoreModel({
store: store,query: {
"type": "continent"
},rootId: "root",rootLabel: "Continents",childrenAttrs: ["children"]
});
new dijit.Tree({
model: treeModel
},"treeOne");
});
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
/>
</head>
<body class=" claro ">
<div id="treeOne">
</div>
<!-- NOTE: the following script tag is not intended for usage in real
world!! it is part of the CodeGlass and you should just remove it when
you use the code -->
<script type="text/javascript">
dojo.addOnLoad(function() {
if (document.pub) {
document.pub();
}
});
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
<head>
<style type="text/css">
body,sans-serif; font-size:90%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
djConfig="parSEOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.Tree");
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
/>
</head>
<body class=" claro ">
<div dojoType="dojo.data.ItemFileReadStore" jsId="continentStore" url="../_static/js//dijit/tests/_data/countries.json">
</div>
<div dojoType="dijit.tree.ForestStoreModel" jsId="continentModel" store="continentStore"
query="{type:'continent'}" rootId="continentRoot" rootLabel="Continents"
childrenAttrs="children">
</div>
<div dojoType="dijit.Tree" id="mytree" model="continentModel" openOnClick="true">
<script type="dojo/method" event="onClick" args="item">
alert("Execute of node " + continentStore.getLabel(item) + ",population=" + continentStore.getValue(item,"population"));
</script>
</div>
<!-- NOTE: the following script tag is not intended for usage in real
world!! it is part of the CodeGlass and you should just remove it when
you use the code -->
<script type="text/javascript">
dojo.addOnLoad(function() {
if (document.pub) {
document.pub();
}
});
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
<head>
<style type="text/css">
body,sans-serif; font-size:90%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
djConfig="parSEOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.Tree");
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
/>
</head>
<body class=" claro ">
<div dojoType="dojo.data.ItemFileReadStore" jsId="continentStore" url="../_static/js//dijit/tests/_data/countries.json">
</div>
<div dojoType="dijit.tree.ForestStoreModel" jsId="continentModel" store="continentStore"
query="{type:'continent'}" rootId="continentRoot" rootLabel="Continents"
childrenAttrs="children">
</div>
<div dojoType="dijit.Tree" id="mytree2" model="continentModel" showRoot="false">
</div>
<!-- NOTE: the following script tag is not intended for usage in real
world!! it is part of the CodeGlass and you should just remove it when
you use the code -->
<script type="text/javascript">
dojo.addOnLoad(function() {
if (document.pub) {
document.pub();
}
});
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
<head>
<style type="text/css">
body,sans-serif; font-size:90%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
djConfig="parSEOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.tree.ForestStoreModel");
dojo.require("dijit.tree.dndSource");
dojo.require("dijit.Tree");
dojo.addOnLoad(function() {
var store = new dojo.data.ItemFileWriteStore({
url: "../_static/js//dijit/tests/_data/countries.json"
});
var treeModel = new dijit.tree.ForestStoreModel({
store: store,childrenAttrs: ["children"]
});
new dijit.Tree({
model: treeModel,dndController: "dijit.tree.dndSource"
},"treeThree");
});
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
/>
</head>
<body class=" claro ">
<div id="treeThree">
</div>
<!-- NOTE: the following script tag is not intended for usage in real
world!! it is part of the CodeGlass and you should just remove it when
you use the code -->
<script type="text/javascript">
dojo.addOnLoad(function() {
if (document.pub) {
document.pub();
}
});
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
<head>
<style type="text/css">
body,sans-serif; font-size:90%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
djConfig="parSEOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dijit.tree.ForestStoreModel");
dojo.require("dijit.tree.dndSource");
dojo.require("dijit.Tree");
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
/>
</head>
<body class=" claro ">
<div dojoType="dojo.data.ItemFileWriteStore" jsId="continentStore5" url="../_static/js//dijit/tests/_data/countries.json">
</div>
<div dojoType="dijit.tree.ForestStoreModel" jsId="continentModel5" store="continentStore5"
query="{type:'continent'}" rootId="continentRoot" rootLabel="Continents"
childrenAttrs="children">
</div>
<div dojoType="dijit.Tree" id="mytree5" dndController="dijit.tree.dndSource"
betweenThreshold="5" showRoot="false" model="continentModel5" openOnClick="true">
</div>
<!-- NOTE: the following script tag is not intended for usage in real
world!! it is part of the CodeGlass and you should just remove it when
you use the code -->
<script type="text/javascript">
dojo.addOnLoad(function() {
if (document.pub) {
document.pub();
}
});
</script>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">
<head>
<style type="text/css">
body,sans-serif; font-size:90%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
djConfig="parSEOnLoad: true">
</script>
<script>
dojo.require("dijit.Menu");
dojo.require("dijit.MenuItem");
dojo.require("dijit.tree.ForestStoreModel");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.Tree");
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
/>
</head>
<body class=" claro ">
<ul dojoType="dijit.Menu" id="tree_menu" style="display: none;">
<li dojoType="dijit.MenuItem" onClick="alert('Hello world');">
Item #1
</li>
<li dojoType="dijit.MenuItem">
Item #2
</li>
</ul>
<div dojoType="dojo.data.ItemFileReadStore" jsId="menuContinentStore"
url="../_static/js//dijit/tests/_data/countries.json">
</div>
<div dojoType="dijit.tree.ForestStoreModel" jsId="menuContinentModel"
store="menuContinentStore" query="{type:'continent'}" rootId="continentRoot"
rootLabel="Continents" childrenAttrs="children">
</div>
<div dojoType="dijit.Tree" id="menuTree" model="menuContinentModel" showRoot="false"
openOnClick="true">
<script type="dojo/connect">
var menu = dijit.byId("tree_menu"); // when we right-click anywhere on the tree,make sure we open the menu menu.bindDomNode(this.domNode); dojo.connect(menu,"_openMyself",this,function(e){ // get a hold of,and log out,the tree node that was the source of this open event var tn = dijit.getEnclosingWidget(e.target); console.debug(tn); // now inspect the data store item that backs the tree node: console.debug(tn.item); // contrived condition: if this tree node doesn't have any children,disable all of the menu items menu.getChildren().forEach(function(i){ i.attr('disabled',!tn.item.children); }); // IMPLEMENT CUSTOM MENU BEHAVIOR HERE });
</script>
</div>
<!-- NOTE: the following script tag is not intended for usage in real
world!! it is part of the CodeGlass and you should just remove it when
you use the code -->
<script type="text/javascript">
dojo.addOnLoad(function() {
if (document.pub) {
document.pub();
}
});
</script>
</body>
</html>
原文链接：https://www.f2er.com/dojo/291697.html
