Ext Tree异步树的增加修改删除的简单实现～

Ext Tree异步树的增加修改删除的简单实现～

之前项目有个模块要求用树形解决，附带要实现checkbox,增删修改以及copy/cut/paste等等功能；
因为之前写的人用了xloadTree，其他功能都实现了，但是客户要求要有cookie功能，实现不了麻烦啊～

正巧现在在学习用Ext,发现Ext的tree本身就很强大基本的功能都可以实现。

Ext.onReady( function () {
    Ext.QuickTips.init();
    Ext.state.Manager.setProvider( new  Ext.state.CookieProvider());

     var  onConfirmDelete  =   function (btn) {
         if  (btn  ==  'yes') {
             var  treePanel  =  Ext.getCmp('treepanel');
            treePanel.el.mask('删除中', 'x - mask - loading');
             var  selNode  =  treePanel.getSelectionModel().getSelectedNode();

            Ext.Ajax.request({
                        url : 'organ ! del. do ',
                        params : {
                            organId : selNode.id
                        },
                        success :  function (response, opts) {
                            treePanel.el.unmask();
                             var  responseJson  =  Ext
                                    .decode(response.responseText);

                             if  (responseJson.success  ===   true ) {
                                selNode.remove();
                            }  else  {
                                Ext.Msg
                                        .alert('An error occured  with  the server.');
                            }
                        }
                    });

        }

    }

     var  onDelete  =   function () {
         var  treePanel  =  Ext.getCmp('treepanel');
         var  selNode  =  treePanel.getSelectionModel().getSelectedNode();

         if  (selNode) {
            Ext.MessageBox.confirm('是否确定 ? ',
                    '请确定删除目录'  +  selNode.attributes.text, onConfirmDelete)
        }
    }

     var  onCompleteAdd  =   function (treeEditor, newValue, oldValue) {
         var  treePanel  =  Ext.getCmp('treepanel');
         var  selNode  =  treePanel.getSelectionModel().getSelectedNode();

         if  (newValue.length  >   0 ) {
            Ext.Ajax.request({
                        url : 'organ ! save. do ',
                        params : {
                            'organInfo.name' : newValue,
                            'organInfo.pid' : selNode.id
                        },
                        success :  function (response, opts) {
                            treePanel.el.unmask();
                             var  responseJson  =  Ext
                                    .decode(response.responseText);

                             if  (responseJson.success  !==   true ) {
                                Ext.Msg.alert('An error occured  with  the server.');
                                treeEditor.editNode.remove();
                            }  else  {
                                treeEditor.editNode.setId(responseJson.data[ 0 ].id);
                            }
                        }
                    });
        }  else  {
            treeEditor.editNode.remove();
        }
    }

     var  onAddNode  =   function () {
         var  treePanel  =  Ext.getCmp('treepanel');
         var  selNode  =  treePanel.getSelectionModel().getSelectedNode();

         if  ( ! this .treeEditor) {
             this .treeEditor  =   new  Ext.tree.TreeEditor(treePanel, {}, {
                        cancelOnEsc :  true ,
                        completeOnEnter :  true ,
                        selectOnFocus :  true ,
                        allowBlank :  false ,
                        listeners : {
                            complete : onCompleteAdd
                        }
                    });
        }
        selNode.leaf  =   false ;
        selNode.expand( false ,  true ,  function () {
                     var  newNodeCfg  =  {
                        text : '',
                        id : 'tmpNode',
                        leaf : (selNode.id  !=  ' 0 '),
                        checked :  true
                    }

                     var  newNode  =  selNode.insertBefore(newNodeCfg,
                            selNode.firstChild);
                     this .treeEditor.editNode  =  newNode;
                     this .treeEditor.startEdit(newNode.ui.textNode);

                },  this );
    }

     var  onCompleteEdit  =   function (treeEditor, newValue, oldValue) {
         var  treePanel  =  Ext.getCmp('treepanel')
        treePanel.el.mask('保存中', 'x - mask - loading');
        
         var  selNode  =  treePanel.getSelectionModel().getSelectedNode();

         var  editNode  =  treeEditor.editNode;
         var  editNodeId  =  editNode.id;
        Ext.Ajax.request({
                    url : 'organ ! saveC. do ',
                    params : {
                        'organInfo.id' : editNodeId,
                        'organInfo.name' : newValue,
                        'organInfo.pid' : editNode.parentNode.id
                    },
                    success :  function (response, opts) {
                        treePanel.el.unmask();
                         var  responseJson  =  Ext.decode(response.responseText);
                         if  (responseJson.success  !==   true ) {
                            editNode.setText(oldValue);
                            Ext.Msg.alert('An error occured  with  the server.');
                        }
                    },
                    failure :  function (response, opts) {
                        treePanel.el.unmask();
                        editNode.setText(oldValue);
                        Ext.Msg.alert('An error occured  with  the server.');
                    }
                });
    }

     var  onEdit  =   function () {
         var  treePanel  =  Ext.getCmp('treepanel');
         var  selectedNode  =  treePanel.getSelectionModel().getSelectedNode();

         if  ( ! this .treeEditor) {
             this .treeEditor  =   new  Ext.tree.TreeEditor(treePanel, {}, {
                        cancelOnEsc :  true ,
                        completeOnEnter :  true ,
                        selectOnFocus :  true ,
                        allowBlank :  false ,
                        listeners : {
                            complete : onCompleteEdit
                        }
                    });
        }

         this .treeEditor.editNode  =  selectedNode;
         this .treeEditor.startEdit(selectedNode.ui.textNode);
    }

     var  buildCtxMenu  =   function () {
         return   new  Ext.menu.Menu({
                    items : [{
                                itemId : 'add',
                                handler : onAddNode
                            }, {
                                itemId : 'edit',
                                handler : onEdit,
                                scope : onEdit
                            }, {
                                itemId : ' delete ',
                                handler : onDelete
                            }]
                });
    }

     var  onCtxMenu  =   function (node, e) {
        node.select();
        e.stopEvent();

         if  ( ! this .ctxMenu) {
             this .ctxMenu  =  buildCtxMenu();
        }

         var  ctxMenu  =   this .ctxMenu;
         var  addItem  =  ctxMenu.getComponent('add');
         var  editItem  =  ctxMenu.getComponent('edit');
         var  deleteItem  =  ctxMenu.getComponent(' delete ');

        addItem.setText('新建文件夹');
        editItem.setText('重命名');
        deleteItem.setText('删除');

         if  (node.id  ==  ' 0 ') {
            addItem.enable();
            deleteItem.disable();
            editItem.disable();
        }  else  {
            addItem.enable();
            editItem.enable();
            deleteItem.enable();
        }

        ctxMenu.showAt(e.getXY());
    },    
     var  tree  =   new  Ext.tree.TreePanel({
                id : 'treepanel',
                autoScroll :  true ,
                animate :  false ,
                enableDD :  true ,
                useArrows :  true ,
                plugins : [ new  Ext.ux.state.TreePanel()],
                loader :  new  WithubTreeLoader({
                            dataUrl : 'organ ! newTree. do '
                        }),
                root : {
                    nodeType : 'async',
                    id : ' 0 ',
                    text : '组织结构',
                    leaf :  false ,
                    expanded :  true
                },
                listeners : {
                    contextmenu : onCtxMenu,
                }
            });

     new  Ext.Window({
                height :  300 ,
                width :  300 ,
                layout : 'fit',
                border :  false ,
                title : 'Our first tree',
                items : tree
            }).show();

});

对应的save,del,newTree方法

public  String save()  throws  Exception {
         if (organInfo.getPid().equals( " 0 " )){
            organInfo.setPid( null );
        }
        String id  =  organInfoService.saveOrganInfo(organInfo);
         return  json( " [{id: " + id + " }] " );
    }

public  String del()  throws  Exception {
        List list  =   this .searchList(organId,  new  ArrayList());
        StringBuffer sb  =   new  StringBuffer();
        sb.append(organId);
         if  (list.size()  !=   0 ) {
             for  ( int  i  =   0 ; i  <  list.size(); i ++ ) {
                sb.append( " , " ).append(list.get(i));
            }
        }
        organInfoService.delOrganInfo(sb.toString().split( " , " ));
         return  json();
    }

public  String newTree()  throws  Exception {
        StringBuffer sb  =   new  StringBuffer();
        List < OrganInfo >  list;
         if (node.equals( " 0 " )){
            list  =  organInfoService.getOrganInfoListByNull();
        }
         else {
            list =  organInfoService.getOrganInfoByPidList(node);
        }
         int  i  =   0 ;
        sb.append( " [ " );
         for (OrganInfo oi : list) {
             if  (i  !=   0 ) {
                sb.append( " , " );
            }
            sb.append( " {text:' " ).append(oi.getName()).append( " ',id:' " ).append(oi.getId()).append( " ' " );
            List < OrganInfo >  listId  =  organInfoService.getOrganInfoByPidList(oi.getId());
             if (listId.size()  !=   0 ) {
                sb.append( " ,leaf:false " );
            }  else  {
                sb.append( " ,leaf:true " );
            }
            sb.append( " ,checked: true " );
            sb.append( " } " );
            i ++ ;
        }
        sb.append( " ] " );
         return  json(sb.toString());
    }

哦，对应tree的打开状态的cookie记录的控件

//  vim: ts=4:sw=4:nu:fdc=4:nospell
/* global Ext  */
/* *
 * @class Ext.ux.state.TreePanel
 *
 * Ext.tree.TreePanel State Plugin
 * <br><br>
 * Usage:
<pre>
var tree = new Ext.tree.TreePanel({
     root:{
         nodeType:'async'
        ,id:'root'
        ,text:'Root'
    }
    ,loader: {
         url:'get-tree.php'
    }
    <b>,plugins:[new Ext.ux.state.TreePanel()]</b>
});
</pre>
 *
 * @author    Ing. Jozef Sakáloš
 * @copyright (c) 2009, by Ing. Jozef Sakáloš
 * @date      <ul>
 * <li>5. April 2009<li>
 * </ul>
 * @version   1.0
 * @revision  $Id: Ext.ux.state.TreePanel.js 676 2009-04-07 13:03:20Z jozo $
 *
 * @license Ext.ux.state.TreePanel.js is licensed under the terms of
 * the Open Source LGPL 3.0 license.  Commercial use is permitted to the extent
 * that the code/component(s) do NOT become part of another Open Source or Commercially
 * licensed development library or toolkit without explicit permission.
 * 
 * <p>License details: <a href="http://www.gnu.org/licenses/lgpl.html"
 * target="_blank">http://www.gnu.org/licenses/lgpl.html</a></p>
 *
 * @forum     64714
 * @demo      http://examples.extjs.eu/?ex=treestate
 * @download  <ul>
 * <li><a href="http://examples.extjs.eu/Ext.ux.state.TreePanel.js.bz2">Ext.ux.state.TreePanel.js.bz2</a></li>
 * <li><a href="http://examples.extjs.eu/Ext.ux.state.TreePanel.js.gz">Ext.ux.state.TreePanel.js.gz</a></li>
 * <li><a href="http://examples.extjs.eu/Ext.ux.state.TreePanel.js.zip">Ext.ux.state.TreePanel.js.zip</a></li>
 * </ul>
 *
 * @donate
 * <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
 * <input type="hidden" name="cmd" value="_s-xclick">
 * <input type="hidden" name="hosted_button_id" value="3430419">
 * <input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-butcc-donate.gif" 
 * border="0" name="submit" alt="PayPal - The safer, easier way to pay online.">
 * <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
 * </form>
  */

Ext.ns('Ext.ux.state');

//  dummy constructor
Ext.ux.state.TreePanel  =   function () {};

Ext.override(Ext.ux.state.TreePanel, {
     /* *
     * Initializes the plugin
     * @param {Ext.tree.TreePanel} tree
     * @private
      */
    init: function (tree) {

         //  install event handlers on TreePanel
        tree.on({
             //  add path of expanded node to stateHash
             beforeexpandnode: function (n) {
                 this .stateHash[n.id]  =  n.getPath();
            }

             //  delete path and all subpaths of collapsed node from stateHash
            ,beforecollapsenode: function (n) {
                 delete   this .stateHash[n.id];
                 var  cPath  =  n.getPath();
                 for ( var  p  in   this .stateHash) {
                     if ( this .stateHash.hasOwnProperty(p)) {
                         if ( - 1   !==   this .stateHash[p].indexOf(cPath)) {
                             delete   this .stateHash[p];
                        }
                    }
                }
            }
        });

         //  update state on node expand or collapse
        tree.stateEvents  =  tree.stateEvents  ||  [];
        tree.stateEvents.push('expandnode', 'collapsenode');

         //  add state related props to the tree
        Ext.apply(tree, {
             //  keeps expanded nodes paths keyed by node.ids
             stateHash:{}

             //  apply state on tree initialization
            ,applyState: function (state) {
                 if (state) {
                    Ext.apply( this , state);

                     //  it is too early to expand paths here
                     //  so do it once on root load
                     this .root.on({
                        load:{single: true , scope: this , fn: function () {
                             for ( var  p  in   this .stateHash) {
                                 if ( this .stateHash.hasOwnProperty(p)) {
                                     this .expandPath( this .stateHash[p]);
                                }
                            }
                        }}
                    });
                }
            }  //  eo function applyState

             //  returns stateHash for save by state manager
            ,getState: function () {
                 return  {stateHash: this .stateHash};
            }  //  eo function getState
        });
    }  //  eo function init

});  //  eo override

//  eof

以上基本实现了树形的主要功能，右键，cookie记住打开的对象，新增新的子节点，直接修改节点名称,删除。