extjs treepanel 右键菜单实现

天涯海角tour

浏览: 174601 次
性别:
来自: 郑州

最近访客更多访客>>

songzhihuis

u010821061

天空与月亮

15071278032

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web前端

EXT CSS Ajax JavaScript json

效果图：
1：

2：

3：

1：html页面

<style type="text/css">
      .leaf
      {
            background:url(../../script/extjs/resources/images/default/tree/drop-add.gif) !important;
              }<!--节点右键菜单的叶子图片-->
     
    </style>
<link rel="stylesheet" type="text/css" href="../../script/extjs/resources/css/ext-all.css" />
   
 	<script type="text/javascript" src="../../script/extjs/adapter/ext/ext-base.js"></script>
 	<!-- ENDLIBS -->

    <script type="text/javascript" src="../../script/extjs/ext-all.js"></script>

<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../../script/extjs/shared/examples1.css" />
</head>
<body>
<script type="text/javascript" src="../../script/extjs/shared/examples1.js"></script><!-- EXAMPLES -->
<script type="text/javascript" src="../../script/treePanel.js"></script><!-- EXAMPLES -->

<body>
    <div id="container" >
    </div>
    
</body>

2：js

Ext.onReady(function(){
    var mytree = new Ext.tree.TreePanel({
        renderTo:'container',
        title: '图片配置',
        height:600,
        widht:900,
        lines:true,
        useArrows:true,
        autoScroll:true,
        animate:true,
        //enableDD:true,
        containerScroll: true,
        resizable : true,
        
        rootVisible: false,
        frame: true,
        root: {
            nodeType: 'async'
        },
        
        // auto create TreeLoader
       // dataUrl: 'treePanel.json',
        loader:new Ext.tree.TreeLoader({

                url:"ImageSortJson2?type=load",//服务器处理数据代码

                listeners:{

                    "loadexception":function(loader,node,response){

                        //加载服务器数据,直到成功

                        

                    }

                }

      }),

		 listeners:{
            "contextmenu":function(node,e){
                              
						 var nodemenu=new Ext.menu.Menu({

                                      items:[{
                                          
                                          text:"添加结点",
                                          iconCls:'leaf',//右键名称前的小图片
                                          handler:function(){

                                            Ext.MessageBox.prompt("请输入新项名称","",function(e,text){

                                                if(e=="ok")

                                                {

                                                  Ext.Ajax.request({
                                                      url: 'ImageSortJson2?type=add&gnbh='+node.id+'&value='+text,
                                                      success:function(request)
                                                      {
                                                          mytree.root.reload();//数的重新加载
                                                          mytree.root.expand(true,false);

                                                      },

                                                      failure:function(){
                                                          alert("添加失败");
                                                      }

                                                  });

                                                }

                                                else

                                                {

                                                      alert("取消了");

                                                }

                                            })

                                          }

                                      },{

                                          text:"编辑结点",
                                          icon: '../../script/extjs/resources/images/default/tree/leaf.gif',
                                           cls: 'x-btn-text-icon',
                                          handler:function(){
                                            Ext.MessageBox.prompt("请输入此项新名称","",function(e,text){
                                                if(e=="ok")
                                                {
                                                  Ext.Ajax.request({
                                                      url: 'ImageSortJson2?type=edit&gnbh='+node.id+"&value="+text,//传递需要的值，服务器会执行修改
                                                      success:function(request)
                                                      {
                                                          mytree.root.reload();
                                                          mytree.root.expand(true,false);

                                                      },

                                                      failure:function(){

                                                          alert("编辑失败");

                                                      }

                                                  });

                                                }

                                                else

                                                {


                                                }

                                            })

                                          }

                                      },{

                                          text:"删除结点",
                                           icon: '../../script/extjs/resources/images/default/tree/delete.jpg',
                                           cls: 'x-btn-text-icon',
                                         // iconCls:'deletess',
                                          handler:function(){
                                          
                                          Ext.MessageBox.confirm("提示","是否确定删除？",function(e){
                                             if(e=="yes")
                                             {
                                               Ext.Ajax.request({

                                                      url: 'ImageSortJson2?type=delete&gnbh='+node.id,//根据id删除节点
                                                      success:function(request)

                                                      {

                                                          mytree.root.reload();

                                                          mytree.root.expand(true,false);

                                                      },

                                                      failure:function(){

                                                          alert("删除失败");

                                                      }

                                            });
                                             }
                                          
                                          });
                                            

                                          }

                                      }]

                                  });

                                  nodemenu.showAt(e.getPoint());//menu的showAt，不要忘记

                              }

                             

                          

						


                                 
      }
  });
  

   mytree.getRootNode().expand(true);

});
       
 
  3:json格式

[{    
        id:'01',
        text:'a',
        children:[
                                 { id:'0102',text:'b',leaf:true},
                                  {id:'0103',text:'c',leaf:true},
                                  {id:'0101',text:'d',leaf:true}
                    ]
         }]