dojo tree 代码汇总

最新推荐文章于 2020-01-14 13:50:51 发布

kinglino520

最新推荐文章于 2020-01-14 13:50:51 发布

阅读量1.3k

点赞数

分类专栏： javascript 文章标签： tree dojo div function button input

javascript 专栏收录该内容

116 篇文章 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="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>

        
        <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>
            
            <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">
    
    <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>

kinglino520

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
dojo tree 代码汇总

"http://www.w3.org/TR/html4/loose.dtd"> Untitled Document var djConfig = {isDebug: true, debugAtAllCosts: true };
复制链接

扫一扫