可直接编辑节点的tree

其实代码并不是很复杂,只是在原有的树形添加一个TreeEditor就可以了。代码如下
由于我一向热衷于面向对象的编程方式,所以我提供的代码也是面向对象型的编程,如有不明白可以发问。
先贴js文件:上面有代码提示


//节点可以编辑的树
Ext.namespace('demo');

demo = function(){
   this.init();//初始化函数  
};

Ext.extend(demo,Ext.util.Observable,{
        
   init:function(){
      //创建一个简写
      var Tree = Ext.tree;
     
      //添加一个树形面板
      this.tree = new Tree.TreePanel({
         el:'tree-panel',//将树形添加到一个指定的div中
         title:'可编辑的树',
         autoScroll:true,
         enableDD:false,//是否支持拖拽效果
         containerScroll: true,//是否支持滚动条
         loader:new Ext.tree.TreeLoader({ 
             dataUrl:'tree-edit-test.json' 
           })
      });
     
      this.treeEditer = new Tree.TreeEditor(
         this.tree,
         {allowBlank: false}
      );
     
      //创建一个根节点
      this.root = new Tree.AsyncTreeNode({   
         text: 'root',   
            draggable:false,   
            id:'source'   
         });   
      //为tree设置根节点
      this.tree.setRootNode(this.root);
      //渲染树形
      this.tree.render();   
         this.root.expand(true); 
     
     
      /*
         为创建的treeEditer添加事件
         有两个事件最为常用,一个为beforestartedit另一个为complete
         从名字就可以看出,beforestartedit事件是在编辑前的事件,因此可以通过它来判断那些节点可以编辑那些不可以。
         complete为编辑之后的事件,在这里面可以添加很多事件,比如添加一个Ext.Ajax向后台传送修改的值等等。
      */
      this.treeEditer.on("beforestartedit", function(treeEditer){
         var tempNode = treeEditer.editNode;//将要编辑的节点
         if(tempNode.isLeaf()){
            return true;
         }else{
            return false;  
         }
       });

       this.treeEditer.on("complete", function(treeEditer){
           alert(treeEditer.editNode.text);
       });
     
     
   }
        
});

//实例化主程序类
Ext.BLANK_IMAGE_URL = 'images/public/s.gif"';

Ext.onReady(function(){
   var myDemo = new demo(); //实例化                              
});

html:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>节点可以编辑的树</title>
<link rel="shortcut icon" href="favicon.ico" />
<link rel="Bookmark" href="favicon.ico" />
<link href="css/default.css" rel="stylesheet" type="text/css">
<!--导入prototype文件 -->
<script language="javascript" type="text/javascript" src="js/prototype.js"></script>
</head>

<body>
<!--loading加载 -->
<div id="loadingTab">
    <div class="loading-indicator">
        <img src="images/public/loader.gif" width="32" height="32" style="margin-right:8px;float:left;vertical-align:top;"/>
        <a href="index.html">可编辑的树练习</a> -
        <span id="loading-yfo"><a href="http://yfoffice.net.cn" target="_blank">忆凡工作室</a></span><br />
        <span id="loading-msg">加载样式表和图片...</span>
    </div>
</div>
<br>
<h1>动态-异步tree的综合练习</h1>
<div id="tree-panel" style=" margin:30px; width:300px; height:400px"></div>

<link href="js/ext-2.0/resources/css/ext-all.css" rel="stylesheet" type="text/css">
<script type="text/javascript">$('loading-msg').innerHTML = '正在加载JSUI组建...';</script>

<script language="javascript" type="text/javascript" src="js/ext-2.0/adapter/ext/ext-base.js"></script>
<script language="javascript" type="text/javascript" src="js/ext-2.0/ext-all.js"></script>
<script language="javascript" type="text/javascript" src="js/ext-2.0/source/locale/ext-lang-zh_CN.js"></script>


<script type="text/javascript">$('loading-msg').innerHTML = '正在初始化...';</script>

<script type="text/javascript" src="js/tree-edit-test.js"></script>
<script type="text/javascript">
   $('loading-msg').innerHTML = '初始化完毕!!';
   Ext.get('loadingTab').fadeOut({remove: true});//让加载标签消失     
</script>
</body>
</html>

你可能感兴趣的:(JavaScript,编程,css,ext,prototype)