不做浮躁的人
正在行走的人...
posts - 171,  comments - 51,  trackbacks - 0

<!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="../../../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="../../../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> 

   
       
        <!-- 直接选择一个节点,但是无法去掉已有的节点。 -->
        <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>

posted on 2006-11-24 02:37 不做浮躁的人 阅读(9649) 评论(3)  编辑  收藏

FeedBack:
# re: dojo tree 代码汇总,基本上功能都全[未登录]
2007-06-26 16:04 | jacky
请问下如果我需要动态的控制actionsDisabled应该怎么写?比如说我在最后一个节点下利用contextmenu新建一个节点,怎么去控制不让这个新建的节点部可以使用contextmenu中的create功能?
还有1个问题,如果说我要不止禁止掉1个功能,应该怎么使用actionsDisabled?  回复  更多评论
  
# re: dojo tree 代码汇总,基本上功能都全
2008-03-27 08:49 | 通天塔
也没有说清楚DOJO的版本 ,我用的1.1 的跑步起来哦  回复  更多评论
  
# re: dojo tree 代码汇总,基本上功能都全
2009-09-03 11:11 | AL
请问

//树的节点做超级连接。
//加div以及在节点写object="href:http://...".
dojo.require("dojo.widget.TreeLinkExtension");


这一段我试过了为什么没有作用呢。


(一下是我的代码)
********** jsp *************

<%@ page language="java" import="java.util.*" pageEncoding="GB2312"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="dojo" uri="/struts-dojo-tags"%>
<%
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Cache-Control", "no-store");
response.setDateHeader("Expires", 0);
response.setHeader("Pragma", "no-cache");
%>
<%@ include file="/include/check.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title></title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<dojo:head />

<script type="text/javascript">

function treeNodeSelected(arg) {
alert(arg.source.title + ' selected');
}

dojo.addOnLoad(function() {
var t = dojo.widget.byId('memberAndUsers');

var s = t.selector;
dojo.event.connect(t, 'select', 'treeNodeSelected');
});

</script>
</head>
<body>
<dojo:div cssStyle="border: 1px solid black; background-color:powderblue;padding-top:8px;padding-left:20px">


<script type="text/javascript">
/* <![CDATA[ */
dojo.require("dojo.lang.*");
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.Tree");
dojo.require("dojo.widget.TreeRPCController");
dojo.require("dojo.widget.TreeLinkExtension");
dojo.require("dojo.widget.TreeSelector");
/* ]]> */
</script>
<div dojoType="TreeRPCController" widgetId="treeController" DNDcontroller="create" RPCUrl="<s:url />"></div>
<div dojoType="Tree" widgetId="memberAndUsers" toggle="fade" controller="treeController">
<div dojoType="TreeNode" title='<s:property value="root.name" />'
widgetId='<s:property value="root.id" />'
isFolder='<s:property value="root.children.length > 0" />'
objectId='<s:property value="root.id" />'>
</div>
</div>


</dojo:div>
</body>
</html>


******** ftl *******

[
<#list wrappers as r>
{ "title": "${r.name}", "isFolder": <#if r.children?size gt 0>true<#else>false</#if>, "id": "${r.id}", "objectId": "${r.id?js_string}" }<#if r_has_next>,</#if>
</#list>
]  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航:
 

<2006年11月>
2930311234
567891011
12131415161718
19202122232425
262728293012
3456789

常用链接

留言簿(9)

随笔分类(31)

随笔档案(75)

文章分类(1)

文章档案(3)

搜索

  •  

最新评论

阅读排行榜

评论排行榜