dojo tree 代码汇总，基本上功能都全
dojo tree 代码汇总，基本上功能都全
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var djConfig = {isDebug: true, debugAtAllCosts: true };
</script>
<script type="text/javascript" src="http://www.cnblogs.com/../dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.TreeV3");
dojo.require("dojo.widget.TreeNodeV3");
dojo.require("dojo.widget.TreeBasicControllerV3");
dojo.require("dojo.widget.TreeDocIconExtension");
dojo.require("dojo.widget.TreeSelectorV3");
dojo.require("dojo.widget.TreeEmphasizeOnSelect");
dojo.require("dojo.widget.TreeExpandOnSelect");
dojo.require("dojo.widget.TreeToggleOnSelect");
//树的节点做超级连接。
//加div以及在节点写object="href:http://...".
dojo.require("dojo.widget.TreeLinkExtension");
//内容不折行
dojo.require("dojo.widget.TreeDisableWrapExtension");
//拖动
dojo.require("dojo.widget.TreeDndControllerV3");
//上下文菜单
dojo.require("dojo.widget.TreeContextMenuV3");
//这个是用来绑定上下文菜单和controller事件的。需要扩展，缺少clone等方法。
dojo.require("dojo.widget.TreeDemo");
//菜单标签编辑器
dojo.require("dojo.widget.TreeEditor");
dojo.hostenv.writeIncludes();
//两种结合方式
//基于方法
var selectAction = function() {
return function(message) {
alert(message.node);
}
}
//基于类
var selectClass = function() {
this.go = function(message) {
alert(message.node.widgetId);
alert(message.node.isFolder);
}
}
dojo.addOnLoad(function(){
/* Add debug print for all controller events */
var selector = dojo.widget.manager.getWidgetById('selector');
//绑定消息的两种方式。
//dojo.event.topic.subscribe(selector.eventNames['select'],selectAction());
dojo.event.topic.subscribe(selector.eventNames['select'],new selectClass(),'go');
//将上下文菜单和控制器进行绑顶。
dojo.addOnLoad(function() { dojo.widget.TreeDemo.bindDemoMenu(dojo.widget.byId("controller")) });
});
//展开层次，注意回调接口。
function testExpandToLevel(level) {
var d = dojo.widget.byId('controller').expandToLevel(dojo.widget.byId('tree'),level);
//dojo.widget.byId('treeController').expandToLevel(dojo.widget.byId('Item 1.3'),3)
//d.addCallback(function() { alert('done') });
}
//添加新的节点
function testCreate() {
var d = dojo.widget.byId('controller').createChild(dojo.widget.byId('Item 1'),1,{title:'tttttttttttttttttttttttttttttttttttttttt'});
//d.addCallbacks(printOk, printErr);
}
//编辑节点。
function testEdit() {
dojo.widget.byId('controller').editLabelStart(dojo.widget.byId('Item 1'));
}
//节点的contentClass可以改变标题内容。
//TreeDocIconExtension：在每个项上加图标。改变docIcon的class。
</script>
<style>
.myCssClass {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
}
</style>
</head>
<body>
<div dojoType="TreeEditor" widgetId="editor"></div>
<div dojoType="TreeDocIconExtension" widgetId="docIcons"></div>
<div dojoType="TreeBasicControllerV3" widgetId="controller" editor="editor"></div>
<div dojoType="TreeSelectorV3" allowedMulti="false" widgetId="selector"></div>
<div dojoType="TreeEmphasizeOnSelect" selector="selector"></div>
<div dojoType="TreeExpandToNodeOnSelect" selector="selector" controller="controller"></div>
<div dojoType="TreeToggleOnSelect" selector="selector" selectEvent="dblselect" controller="controller"></div>
<div dojoType="TreeLinkExtension" widgetId="link" params="target:_blank"></div>
<div dojoType="TreeDisableWrapExtension" widgetId="disableWrap"></div>
<div dojoType="TreeDndControllerV3" controller="controller" widgetId="dndcontroller"></div>
<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>
<!-- 增加DND功能，在tree div中增加DndMode="between;onto" DndAcceptTypes="tree"-->
<div dojoType="TreeV3" DndMode="between;onto" DndAcceptTypes="tree" listeners="controller;docIcons;selector;link;disableWrap;contextMenu;dndcontroller" widgetId="tree">
<div dojoType="TreeNodeV3" title="Item 1" object="href:http://news.sina.com.cn" widgetId="Item 1" contentClass="myCssClass">
<div dojoType="TreeNodeV3" title="Item 1.1" widgetId="Item 1.1" contentClass="myCssClass"></div>
<div dojoType="TreeNodeV3" title="Item 1.2" widgetId="Item 1.2" contentClass="myCssClass"></div>
<div dojoType="TreeNodeV3" title="Item 1.3" widgetId="Item 1.3" contentClass="myCssClass">
<div dojoType="TreeNodeV3" title="Item 1.3.1" widgetId="Item 1.3.1" contentClass="myCssClass"></div>
<div dojoType="TreeNodeV3" title="Item 1.3.2" widgetId="Item 1.3.2" contentClass="myCssClass">
<div dojoType="TreeNodeV3" title="Item 1.3.2.1" widgetId="Item 1.3.2.1" contentClass="myCssClass"></div>
<div dojoType="TreeNodeV3" title="Item 1.3.3.2" widgetId="Item 1.3.3.2" contentClass="myCssClass">
<div dojoType="TreeNodeV3" title="Item 1.3.3.2.1" widgetId="Item 1.3.3.2.1" contentClass="myCssClass"></div>
</div>
</div>
</div>
</div>
<!-- node有actionsDisabled 属性-->
<div dojoType="TreeNodeV3" actionsDisabled="MOVE" title="Can't move this node"></div>
<div dojoType="TreeNodeV3" actionsDisabled="ADDCHILD" title="Can't add child this node"></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="http://www.cnblogs.com/../src/widget/templates/images/TreeV3/i.gif">
<img src="http://www.cnblogs.com/../src/widget/templates/images/TreeV3/i_half.gif">
<img src="http://www.cnblogs.com/../src/widget/templates/images/TreeV3/expand_minus.gif">
<img src="http://www.cnblogs.com/../src/widget/templates/images/TreeV3/expand_plus.gif">
<img src="http://www.cnblogs.com/../src/widget/templates/images/TreeV3/expand_leaf.gif">
<img src="http://www.cnblogs.com/../src/widget/templates/images/TreeV3/i_long.gif">
<img src="http://www.cnblogs.com/../src/widget/templates/images/TreeV3/document.gif">
<img src="http://www.cnblogs.com/../src/widget/templates/images/TreeV3/open.gif">
<img src="http://www.cnblogs.com/../src/widget/templates/images/TreeV3/closed.gif">
</div>
<!-- 直接选择一个节点,但是无法去掉已有的节点。 -->
<input type="button" value="select Item 1" onClick="dojo.widget.byId('selector').select(dojo.widget.byId('Item 1'))"/>
<input type="button" value="Expand to level 3" onClick="testExpandToLevel(100)"/>
<input type="button" value="create new node" onClick="testCreate()"/>
<input type="button" value="edit" onClick="testEdit()"/>
</body>
</html>
.jpg)
