使用Ext完成的一棵可以自由移动，删除，更新，添加节点的树

原创 于 2008-08-24 14:09:00 发布 · 2.4k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ext #function #stylesheet #input #layout #html

本文介绍了一个使用ExtJS实现的树形控件示例，包括节点的增删改操作及拖拽功能，并展示了如何通过右键菜单进行节点管理。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<link rel="stylesheet" type="text/css" href="fav_node/ext-all.css" />
<script type="text/javascript" src="fav_node/ext-base.js"></script>
<script type="text/javascript" src="fav_node/ext-all.js"></script>
</head>
<body>

<script type="text/javascript">
var form1;
var x=0;
Ext.onReady(function(){
      //定义树的跟节点
      var root=new Ext.tree.TreeNode({
            id:"0",//根节点id
            text:"我是树根"
      });
    
      //定义树节点
     
      var node21=new Ext.tree.TreeNode({
        id:'21',//子结点id
        text:'新闻台'
      });
   
      var node22=new Ext.tree.TreeNode({
        id:'22',//子结点id
        text:'经济台'
      });
   
      var node23=new Ext.tree.TreeNode({
        id:'23',//子结点id
        text:'新闻早报台'
      });
   
      var node24=new Ext.tree.TreeNode({
        id:'24',//子结点id
        text:'开始曲-快乐清晨'
      });
   
      var node25=new Ext.tree.TreeNode({
        id:'25',//子结点id
        text:'清风晨曲'
      });
   
      var node41=new Ext.tree.TreeNode({
        id:'41',//子结点id
        text:'经济之声'
      });
   
      var node61=new Ext.tree.TreeNode({
        id:'61',//子结点id
        text:'早间新闻'
      });
   
      var node64=new Ext.tree.TreeNode({
        id:'64',//子结点id
        text:'aaa'
      });
   
      var node65=new Ext.tree.TreeNode({
        id:'65',//子结点id
        text:'ccc'
      });
   
      var node102=new Ext.tree.TreeNode({
        id:'102',//子结点id
        text:'bbv'
      });
   
      var node101=new Ext.tree.TreeNode({
        id:'101',//子结点id
        text:'原创音乐'
      });
   
      var node122=new Ext.tree.TreeNode({
        id:'122',//子结点id
        text:'xxx'
      });
   
      var node123=new Ext.tree.TreeNode({
        id:'123',//子结点id
        text:'qweqr'
      });
   
      var node124=new Ext.tree.TreeNode({
        id:'124',//子结点id
        text:'qwerqwer'
      });
   
    
     
    
     
    root.appendChild(node21);//为根节点增加子结点
   
    root.appendChild(node22);//为根节点增加子结点
   
      node21.appendChild(node23);//为根节点增加子结点
     
      node21.appendChild(node24);//为根节点增加子结点
     
      node24.appendChild(node25);//为根节点增加子结点
     
      node22.appendChild(node41);//为根节点增加子结点
     
      node22.appendChild(node101);//为根节点增加子结点
     
      node23.appendChild(node61);//为根节点增加子结点
     
      node25.appendChild(node64);//为根节点增加子结点
     
      node25.appendChild(node65);//为根节点增加子结点
     
      node25.appendChild(node122);//为根节点增加子结点
     
      node65.appendChild(node102);//为根节点增加子结点
     
      node65.appendChild(node123);//为根节点增加子结点
     
      node102.appendChild(node124);//为根节点增加子结点
     
  
          
      //生成树形面板
      var tree=new Ext.tree.TreePanel({
        renderTo:"show",
        root:root,//定位到根节点
        animate:true,//开启动画效果
        enableDD:true,//允许子节点拖动
        border:false,//没有边框
        rootVisible:true//设为false将隐藏根节点，很多情况下，我们选择隐藏根节点增加美观性
     });
     //定义表单
 form1 = new Ext.FormPanel({
    defaultType: 'textfield',
    labelAlign: 'right',
    title: '节点信息',
    labelWidth: 50,
    frame: true,
    width: 300,
    items: [{
           fieldLabel: '节点名',
    name:'nodename',
     allowBlank:false
        },{
           fieldLabel: '描述',
    name:'desc',
    inputType:'password',
     allowBlank:false
       }],

       buttons: [{
           text: '确定',
           type: 'submit',
           handler:function(){
     alert(document.getElementById('nodename').value);
     
     document.addNodeform.node_Name.value=document.getElementById('nodename').value;
     document.addNodeform.description.value=document.getElementById('desc').value;
     document.addNodeform.submit();
     }
    
       },{
    text:'取消',
    type:'cancel'
   }]
   });
    //定义右键菜单
     var rightClick = new Ext.menu.Menu({
        id :'rightClickCont',
        items : [{
            id:'rMenu1',
            text : '添加节点',
            //增加菜单点击事件
            handler:function (){
                      alert('我被点击了添加节点！');
                      document.addNodeform.UorC.value="create";
                     // var nodeid=tree.getSelectionModel().getSelectedNode().id;
                  // document.addNodeform.node_Id.value=nodeid;
                      var win = new Ext.Window({
          el:'window-win',
          layout:'fit',
          width:315,
          height:150,
          closeAction:'hide',

          items: [form1]
     });
    win.show();
    
             
                    }
        }, {
            id:'rMenu2',
            text : '删除节点',
            handler:function (){
                      alert('我被点击了删除节点！');
                      document.addNodeform.UorC.value="delete";
                      //var nodeid=tree.getSelectionModel().getSelectedNode().id;
                      //document.addNodeform.node_Id.value=nodeid;
                     
                      document.addNodeform.submit();
                     
                    }
        }, {
            id:'rMenu3',
            text : '修改节点',
            handler:function (){
                      alert('我被点击了修改！');
                      document.addNodeform.UorC.value="update";
                      //var nodeid=tree.getSelectionModel().getSelectedNode().id;
                   //document.addNodeform.node_Id.value=nodeid;
                      var win = new Ext.Window({
          el:'window-win',
          layout:'fit',
          width:315,
          height:150,
          closeAction:'hide',

          items: [form1]
     });
    win.show();
                    }
        }
        ]
    });
 //增加右键点击事件
     root.on('contextmenu',function(node,event){//声明菜单类型
      document.addNodeform.node_Id.value=node.id;
      alert(node.id);
        event.preventDefault();//这行是必须的，谁能解释下，我没搞懂-_-||
          rightClick.showAt(event.getXY());//取得鼠标点击坐标，展示菜单
    });  

node21.on('contextmenu',function(node,event){//声明菜单类型
        document.addNodeform.node_Id.value=node.id;
      //alert(node.id);
        event.preventDefault();//这行是必须的，谁能解释下，我没搞懂-_-||
          rightClick.showAt(event.getXY());//取得鼠标点击坐标，展示菜单
    }); 

node22.on('contextmenu',function(node,event){//声明菜单类型
        document.addNodeform.node_Id.value=node.id;
      //alert(node.id);
        event.preventDefault();//这行是必须的，谁能解释下，我没搞懂-_-||
          rightClick.showAt(event.getXY());//取得鼠标点击坐标，展示菜单
    }); 

node23.on('contextmenu',function(node,event){//声明菜单类型
        document.addNodeform.node_Id.value=node.id;
      //alert(node.id);
        event.preventDefault();//这行是必须的，谁能解释下，我没搞懂-_-||
          rightClick.showAt(event.getXY());//取得鼠标点击坐标，展示菜单
    }); 

node24.on('contextmenu',function(node,event){//声明菜单类型
        document.addNodeform.node_Id.value=node.id;
      //alert(node.id);
        event.preventDefault();//这行是必须的，谁能解释下，我没搞懂-_-||
          rightClick.showAt(event.getXY());//取得鼠标点击坐标，展示菜单
    }); 

node25.on('contextmenu',function(node,event){//声明菜单类型
        document.addNodeform.node_Id.value=node.id;
      //alert(node.id);
        event.preventDefault();//这行是必须的，谁能解释下，我没搞懂-_-||
          rightClick.showAt(event.getXY());//取得鼠标点击坐标，展示菜单
    }); 

node41.on('contextmenu',function(node,event){//声明菜单类型
        document.addNodeform.node_Id.value=node.id;
      //alert(node.id);
        event.preventDefault();//这行是必须的，谁能解释下，我没搞懂-_-||
          rightClick.showAt(event.getXY());//取得鼠标点击坐标，展示菜单
    }); 

node61.on('contextmenu',function(node,event){//声明菜单类型
        document.addNodeform.node_Id.value=node.id;
      //alert(node.id);
        event.preventDefault();//这行是必须的，谁能解释下，我没搞懂-_-||
          rightClick.showAt(event.getXY());//取得鼠标点击坐标，展示菜单
    }); 

node64.on('contextmenu',function(node,event){//声明菜单类型
        document.addNodeform.node_Id.value=node.id;
      //alert(node.id);
        event.preventDefault();//这行是必须的，谁能解释下，我没搞懂-_-||
          rightClick.showAt(event.getXY());//取得鼠标点击坐标，展示菜单
    }); 

node65.on('contextmenu',function(node,event){//声明菜单类型
        document.addNodeform.node_Id.value=node.id;
      //alert(node.id);
        event.preventDefault();//这行是必须的，谁能解释下，我没搞懂-_-||
          rightClick.showAt(event.getXY());//取得鼠标点击坐标，展示菜单
    }); 

node102.on('contextmenu',function(node,event){//声明菜单类型
        document.addNodeform.node_Id.value=node.id;
      //alert(node.id);
        event.preventDefault();//这行是必须的，谁能解释下，我没搞懂-_-||
          rightClick.showAt(event.getXY());//取得鼠标点击坐标，展示菜单
    }); 

node101.on('contextmenu',function(node,event){//声明菜单类型
        document.addNodeform.node_Id.value=node.id;
      //alert(node.id);
        event.preventDefault();//这行是必须的，谁能解释下，我没搞懂-_-||
          rightClick.showAt(event.getXY());//取得鼠标点击坐标，展示菜单
    }); 

node122.on('contextmenu',function(node,event){//声明菜单类型
        document.addNodeform.node_Id.value=node.id;
      //alert(node.id);
        event.preventDefault();//这行是必须的，谁能解释下，我没搞懂-_-||
          rightClick.showAt(event.getXY());//取得鼠标点击坐标，展示菜单
    }); 

node123.on('contextmenu',function(node,event){//声明菜单类型
        document.addNodeform.node_Id.value=node.id;
      //alert(node.id);
        event.preventDefault();//这行是必须的，谁能解释下，我没搞懂-_-||
          rightClick.showAt(event.getXY());//取得鼠标点击坐标，展示菜单
    }); 

node124.on('contextmenu',function(node,event){//声明菜单类型
        document.addNodeform.node_Id.value=node.id;
      //alert(node.id);
        event.preventDefault();//这行是必须的，谁能解释下，我没搞懂-_-||
          rightClick.showAt(event.getXY());//取得鼠标点击坐标，展示菜单
    }); 

   
root.on("click",function(node,event){
   alert("您点击了"+node.id);
 }
 );
 
 
 node21.addListener("beforemove", befMoveHandler);
node21.addListener("move", aftMoveHandler);
 node21.on("move",function(node,old){
   alert("您点击了"+node.id);
   document.addNodeform.submit();
 }
 );
 
 node22.addListener("beforemove", befMoveHandler);
node22.addListener("move", aftMoveHandler);
 node22.on("move",function(node,old){
   alert("您点击了"+node.id);
   document.addNodeform.submit();
 }
 );
 
 node23.addListener("beforemove", befMoveHandler);
node23.addListener("move", aftMoveHandler);
 node23.on("move",function(node,old){
   alert("您点击了"+node.id);
   document.addNodeform.submit();
 }
 );
 
 node24.addListener("beforemove", befMoveHandler);
node24.addListener("move", aftMoveHandler);
 node24.on("move",function(node,old){
   alert("您点击了"+node.id);
   document.addNodeform.submit();
 }
 );
 
 node25.addListener("beforemove", befMoveHandler);
node25.addListener("move", aftMoveHandler);
 node25.on("move",function(node,old){
   alert("您点击了"+node.id);
   document.addNodeform.submit();
 }
 );
 
 node41.addListener("beforemove", befMoveHandler);
node41.addListener("move", aftMoveHandler);
 node41.on("move",function(node,old){
   alert("您点击了"+node.id);
   document.addNodeform.submit();
 }
 );
 
 node61.addListener("beforemove", befMoveHandler);
node61.addListener("move", aftMoveHandler);
 node61.on("move",function(node,old){
   alert("您点击了"+node.id);
   document.addNodeform.submit();
 }
 );
 
 node64.addListener("beforemove", befMoveHandler);
node64.addListener("move", aftMoveHandler);
 node64.on("move",function(node,old){
   alert("您点击了"+node.id);
   document.addNodeform.submit();
 }
 );
 
 node65.addListener("beforemove", befMoveHandler);
node65.addListener("move", aftMoveHandler);
 node65.on("move",function(node,old){
   alert("您点击了"+node.id);
   document.addNodeform.submit();
 }
 );
 
 node102.addListener("beforemove", befMoveHandler);
node102.addListener("move", aftMoveHandler);
 node102.on("move",function(node,old){
   alert("您点击了"+node.id);
   document.addNodeform.submit();
 }
 );
 
 node101.addListener("beforemove", befMoveHandler);
node101.addListener("move", aftMoveHandler);
 node101.on("move",function(node,old){
   alert("您点击了"+node.id);
   document.addNodeform.submit();
 }
 );
 
 node122.addListener("beforemove", befMoveHandler);
node122.addListener("move", aftMoveHandler);
 node122.on("move",function(node,old){
   alert("您点击了"+node.id);
   document.addNodeform.submit();
 }
 );
 
 node123.addListener("beforemove", befMoveHandler);
node123.addListener("move", aftMoveHandler);
 node123.on("move",function(node,old){
   alert("您点击了"+node.id);
   document.addNodeform.submit();
 }
 );
 
 node124.addListener("beforemove", befMoveHandler);
node124.addListener("move", aftMoveHandler);
 node124.on("move",function(node,old){
   alert("您点击了"+node.id);
   document.addNodeform.submit();
 }
 );
 
 
root.expand(true, true);
function befMoveHandler(e){
        if (!confirm("您确定要移动此节点吗?")) {
            return false;
        }
        else {
            return true;
        }
       
    };
function aftMoveHandler(thistree, thisnode, oldParent, newParent){
 alert(oldParent.id);
 alert(newParent.id);
    document.addNodeform.node_Id.value=thisnode.id;
    document.addNodeform.newnode_Id.value=newParent.id;
    document.addNodeform.UorC.value="move";
    };
})
</script>
<div id="show"></div>
<div id="window-win">
<div id="form1"></div>
</div>
<form action="addNode.do" method="post" name="addNodeform">
<input name="node_Id" type="hidden" value="">
<input name="newnode_Id" type="hidden" value="">
<input name="UorC" type="hidden" value="">

<input type="hidden" name="node_Name" value=""><br>
<input type="hidden" name="description" value=""><br>

</form>
</body>
</html>

 

拿出来共享下，有需要的朋友来看看，本人初次学习Ext，做的不是很完善！献丑了！

lovegjj
关注
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值