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.
137 lines
3.9 KiB
137 lines
3.9 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.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],
|
||
|
|
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);
|
||
|
|
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
function expandAllStart() {
|
||
|
|
dojo.profile.start("expandAll + timeouts");
|
||
|
|
}
|
||
|
|
|
||
|
|
function expandAllEnd() {
|
||
|
|
dojo.profile.end("expandAll + timeouts");
|
||
|
|
alert("expandAll finished");
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<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>
|
||
|
|
|
||
|
|
|
||
|
|
<h4>Test drag'n'drop & lazy creation & batch expand stuff</h4>
|
||
|
|
|
||
|
|
<input type="button" value="Expand first node to level 2" onClick="controller.expandToLevel(tree.children[0],2)"/>
|
||
|
|
<input type="button" value="Expand tree to level 2" onClick="controller.expandToLevel(tree,2)"/>
|
||
|
|
<input type="button" value="Expand all with callback at finish" onClick="expandAllStart();controller.expandAll(tree,expandAllEnd)"/>
|
||
|
|
<br/>
|
||
|
|
<input type="button" value="Collapse all nodes" onClick="controller.collapseAll(tree)"/>
|
||
|
|
<br/>
|
||
|
|
<input type="button" value="Clone first node and append to tree" onClick="tree.addChild(tree.children[0].clone(true))">
|
||
|
|
<br/>
|
||
|
|
|
||
|
|
<input type="button" value="dump profile" onClick="dojo.profile.dump(true)">
|
||
|
|
</body>
|
||
|
|
</html>
|