You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
130 lines
3.8 KiB
130 lines
3.8 KiB
2 years ago
|
<html>
|
||
|
|
<head>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
var djConfig = {isDebug: true, debugAtAllCosts: true };
|
||
|
|
</script>
|
||
|
|
<script type="text/javascript" src="../../../dojo.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
delete dojo["profile"];
|
||
|
|
dojo.require("dojo.profile");
|
||
|
|
|
||
|
|
dojo.require("dojo.widget.*");
|
||
|
|
dojo.require("dojo.widget.TreeV3");
|
||
|
|
dojo.require("dojo.widget.TreeNodeV3");
|
||
|
|
dojo.require("dojo.widget.TreeBasicControllerV3");
|
||
|
|
dojo.require("dojo.widget.TreeDndControllerV3");
|
||
|
|
dojo.require("dojo.widget.TreeContextMenuV3");
|
||
|
|
dojo.require("dojo.widget.TreeDemo");
|
||
|
|
dojo.hostenv.writeIncludes();
|
||
|
|
</script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
|
||
|
|
var nodeCount = 0;
|
||
|
|
var nodeCountMax = 500;
|
||
|
|
dojo.addOnLoad(function(){
|
||
|
|
var depth = 0;
|
||
|
|
|
||
|
|
|
||
|
|
function addChildren(title) {
|
||
|
|
//dojo.debug("addChildren title "+title);
|
||
|
|
|
||
|
|
depth++;
|
||
|
|
|
||
|
|
var children = [];
|
||
|
|
for (var i=1; i<=5; i++) {
|
||
|
|
|
||
|
|
var t = title+'.'+i;
|
||
|
|
var node = {title: t};
|
||
|
|
|
||
|
|
children.push(node);
|
||
|
|
nodeCount++
|
||
|
|
if (nodeCount >= nodeCountMax) break;
|
||
|
|
}
|
||
|
|
|
||
|
|
var i=1;
|
||
|
|
dojo.lang.forEach(children, function(child) {
|
||
|
|
var t = title+'.'+i;
|
||
|
|
i++;
|
||
|
|
|
||
|
|
// first node is always folder for tests
|
||
|
|
if (nodeCount<nodeCountMax && (
|
||
|
|
depth==1 && child === children[0] || depth<5 && Math.random()>0.3 )
|
||
|
|
) {
|
||
|
|
//dojo.debug("add child "+t);
|
||
|
|
child.children = addChildren(t);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
//dojo.debug("out "+nodeOrTree);
|
||
|
|
|
||
|
|
depth--;
|
||
|
|
|
||
|
|
return children;
|
||
|
|
}
|
||
|
|
|
||
|
|
controller = dojo.widget.createWidget("TreeBasicControllerV3");
|
||
|
|
dndcontroller = dojo.widget.createWidget("TreeDndControllerV3", { controller: controller });
|
||
|
|
|
||
|
|
dojo.profile.start("createTree");
|
||
|
|
tree = dojo.widget.createWidget("TreeV3", {
|
||
|
|
listeners: [controller.widgetId,dndcontroller.widgetId,"contextMenu"],
|
||
|
|
DndAcceptTypes: "firstTree",
|
||
|
|
widgetId: "firstTree",
|
||
|
|
DndMode:"between;onto"
|
||
|
|
});
|
||
|
|
dojo.profile.end("createTree");
|
||
|
|
|
||
|
|
document.body.appendChild(tree.domNode);
|
||
|
|
|
||
|
|
|
||
|
|
dojo.profile.start("prepareNodes");
|
||
|
|
var nodes = addChildren('node', tree);
|
||
|
|
dojo.profile.end("prepareNodes");
|
||
|
|
|
||
|
|
dojo.profile.start("addNodes");
|
||
|
|
|
||
|
|
tree.setChildren(nodes);
|
||
|
|
dojo.profile.end("addNodes");
|
||
|
|
|
||
|
|
dojo.debug("Nodes total: "+nodeCount);
|
||
|
|
|
||
|
|
|
||
|
|
dojo.addOnLoad(function() { dojo.widget.TreeDemo.bindDemoMenu(controller) });
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
|
||
|
|
<div dojoType="TreeContextMenuV3" toggle="explode" contextMenuForWindow="false" widgetId="contextMenu">
|
||
|
|
<div dojoType="TreeMenuItemV3" treeActions="addChild" iconSrc="../images/createsmall.gif" widgetId="treeContextMenuCreate" caption="Create"></div>
|
||
|
|
<div dojoType="TreeMenuItemV3" treeActions="remove" iconSrc="../images/removesmall.gif" caption="Remove" widgetId="treeContextMenuDestroy"></div>
|
||
|
|
<div dojoType="TreeMenuItemV3" treeActions="move" iconSrc="../images/downsmall.png" caption="Up" widgetId="treeContextMenuUp"></div>
|
||
|
|
<div dojoType="TreeMenuItemV3" treeActions="move" iconSrc="../images/upsmall.png" caption="Down" widgetId="treeContextMenuDown"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div style="display:none">
|
||
|
|
<!-- IE has a bug: it reloads all dynamically resolved images, no matter, is it
|
||
|
|
new Image() or CSS background. If you don't specify images like that,
|
||
|
|
it will reload them every time a node is expanded -->
|
||
|
|
<img src="../../../src/widget/templates/images/TreeV3/i.gif">
|
||
|
|
<img src="../../../src/widget/templates/images/TreeV3/i_half.gif">
|
||
|
|
<img src="../../../src/widget/templates/images/TreeV3/expand_minus.gif">
|
||
|
|
<img src="../../../src/widget/templates/images/TreeV3/expand_plus.gif">
|
||
|
|
<img src="../../../src/widget/templates/images/TreeV3/expand_leaf.gif">
|
||
|
|
<img src="../../../src/widget/templates/images/TreeV3/i_long.gif">
|
||
|
|
<img src="../../../src/widget/templates/images/TreeV3/document.gif">
|
||
|
|
<img src="../../../src/widget/templates/images/TreeV3/open.gif">
|
||
|
|
<img src="../../../src/widget/templates/images/TreeV3/closed.gif">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|