Extjs的Tree的部分用法

前段时间，因为工作很忙，所以一直都没有写了。

最近因为工作上的一个任务需要用到Extjs的Tree，所以现在把我在任务中用到的方法，和遇到的问题，在这里写一下。

任务平台是asp.net 2003 + sqlserver 2005

任务需求是这样的：界面上方左右两个tree，然后通过URL地址栏传入一个参数corpcode，并在右边的tree加载该公司和与该公司有关系的公司（上下级关系和平级关系），然后通过一个文本框，查询一些公司加载到左边的tree，然后通过左右tree的拖动，来调整右边tree公司的关系，最后保存。

 

这里，我们先建2个页面，其中一个名为CorpGroupRelation，用于加载tree，另一页面为CorpGroupAjax，用于传递ajax。

 

这里我先把两个文件的代码贴出来：

CorpGroupRelation.aspx

 

<% ... @ Page language="c#" Codebehind="CorpGroupRelation.aspx.cs" AutoEventWireup="false" Inherits="CECERP.IE.CRM.ExtCorp.CorpGroupRelation.CorpGroupRelation"  %>
<% ... @ Register TagPrefix="eventapproval" Namespace="CECERP.IE.Libraries.Controls.EventApproval" Assembly="CECERP.IE.Libraries"  %>
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"  >
< HTML >
     < HEAD >
         < title > title >
         < meta  content ="Microsoft Visual Studio .NET 7.1"  name ="GENERATOR" >
         < meta  content ="C#"  name ="CODE_LANGUAGE" >
         < meta  content ="JavaScript"  name ="vs_defaultClientScript" >
         < meta  content ="http://schemas.microsoft.com/intellisense/ie5"  name ="vs_targetSchema" >
         < LINK  href ="../../../../Libraries/Scripts/extjs-2.0/resources/css/ext-all.css"  type ="text/css"
            rel ="stylesheet" >
         < script  language ="javascript"  src ="../../../../Libraries/Scripts/extjs-2.0/adapter/ext/ext-base.js"
            type ="text/javascript" > script >
         < script  language ="javascript"  src ="../../../../Libraries/Scripts/extjs-2.0/ext-all.js"  type ="text/javascript" > script >
         < style  type ="text/css" > ...  HR {...}{ clear: both; visibility: hidden }
         style >
     HEAD >
     < body >
         < form  id ="Form1"  method ="post"  runat ="server" >
             < input  id ="html_TxtB_corpcode"  type ="hidden"  name ="html_TxtB_corpcode" >   < input  id ="html_TxtB_OldID"  type ="hidden"  name ="html_TxtB_OldID"  runat ="server" >
             < input  id ="html_TxtB_New"  type ="hidden"  name ="html_TxtB_New"  runat ="server" >   < input  id ="html_TxtB_Root"  type ="hidden"  name ="html_TxtB_Root"  runat ="server" >
             < TABLE  id ="html_tableHead"  cellSpacing ="0"  cellPadding ="0"  width ="100%"  border ="0" >
                 < TR >
                     < TD >
                         < P  align ="center" >< INPUT  id ="TxtB_Query"  type ="text"  size ="31"  name ="TxtB_Query" >  
                             < INPUT  id ="html_btnSearch"  type ="button"  name ="html_btnSearch" > P >
                     TD >
                 TR >
                 < TR >
                     < TD >
                         < TABLE  id ="html_tabletree"  cellSpacing ="0"  cellPadding ="0"  width ="100%"  border ="0" >
                             < TR >
                                 < TD  width ="50%" >
                                     < div  id ="list1"  style ="HEIGHT: 300px" >
                                         < hr >
                                     div >
                                     < div  id ="list"  style ="DISPLAY: none; HEIGHT: 300px" >
                                         < hr >
                                     div >
                                 TD >
                                 < TD  vAlign ="top" >
                                     < div  id ="tree"  style ="HEIGHT: 300px" >
                                         < hr >
                                     div >
                                 TD >
                             TR >
                         TABLE >
                     TD >
                 TR >
             TABLE >
         form >
         < script  language ="javascript" > ...     
            <asp:Literal Runat="server" ID="LiteralScript">asp:Literal>        
         script >
         < script  type ="text/javascript" > ...                                 
            Ext.onReady(function()...{
               //输入框样式
                var textquery = new Ext.form.TextField(...{
                    allowBlank:false,
                    applyTo: 'TxtB_Query'
                });                                
                
                //搜寻事件
                Ext.get('html_btnSearch').on('click', function()...{                    
                    if(Ext.get('TxtB_Query').dom.value=="")
                    ...{
                        alert( Checktext );
                        Ext.get('TxtB_Query').focus();
                    }
                    else
                    ...{                       
                        Ext.get('list1').dom.style.display="none";
                        Ext.get('list').dom.style.display="";
                        var msg = Ext.get('list');
                        msg.load(...{
                            url: 'CorpGroupAjax.aspx', // <-- change if necessary
                            params: 'param1=1',
                            text: 'Updating...',
                            scripts: true
                        });
                        msg.show();
                        SaveList();
                    }
                });
                
                

                 //初始化左侧样式   
                var listree1 = new Ext.tree.TreePanel(...{
                    el:'list1',
                    animate:true, 
                    autoScroll:true,
                    enableDD:true,
                    containerScroll: true,
                    lines:false,
                    
                    rootVisible:false,
                    dropConfig: ...{appendOnly:true}
                });
                new Ext.tree.TreeSorter(listree1, ...{folderSort:true});        
                
                var root = new Ext.tree.AsyncTreeNode(...{
                    draggable:false, 
                    id:'source'
                });
                listree1.setRootNode(root);
                listree1.render();                
                root.expand(true, /**//*no anim*/ false);
           });
            var tree;
            var RightTreeLoad = function()...{
            var Tree = Ext.tree;
            return ...{
                 init : function()...{
                   tree = new Tree.TreePanel(...{
                        el:'tree',
                        animate:true, 
                        autoScroll:true,
                        loader: new Tree.TreeLoader(...{dataUrl:'CorpGroupAjax.aspx?corpcode='+Ext.get('html_TxtB_corpcode').dom.value}),
                        enableDD:true,
                        containerScroll: true,
                        dropConfig: ...{appendOnly:true}
                    });
                    new Tree.TreeSorter(tree, ...{folderSort:true});
                    var root = new Tree.AsyncTreeNode(...{
                        text: corpName,
                        draggable:false, 
                        id:'source'
                    });
                    tree.setRootNode(root);
                    tree.render();
                    root.expand(true, /**//*no anim*/ false);   
                    tree.on('click',function(e)...{
                        SaveList();
                    });                     
                    tree.on('enddrag',function(Node,e)...{
                        SaveList();
                        FindList();
                    });                                   
                }                                 
            };                   
        }();
        //右侧菜单加载
        Ext.EventManager.onDocumentReady(RightTreeLoad.init, RightTreeLoad, true);
        
        
        //左侧列表加载
        TreeShow = function()...{
            return ...{
                 init : function()...{
                    var listree = new Ext.tree.TreePanel(...{
                        el:'list',
                        animate:true, 
                        autoScroll:true,
                        loader: new Ext.tree.TreeLoader(...{dataUrl:'CorpGroupAjax.aspx?Search='+escape(Ext.get('TxtB_Query').dom.value)}),
                        enableDD:true,
                        containerScroll: true,
                        lines:false,
                        title:corpName,
                        rootVisible:false
                    });
                    new Ext.tree.TreeSorter(listree, ...{folderSort:true});
                    var root = new Ext.tree.AsyncTreeNode(...{
                        draggable:false, 
                        id:'source'   
                    });
                    listree.setRootNode(root); 
                    listree.render();
                    root.expand(true, /**//*no anim*/ false);
                    listree.on('enddrag',function(Node,e)...{
                        FindList();
                    });  
                 }
             };
        }();       
         script >
         < script  language ="javascript" > ...
         result="";
        function SaveList()
        ...{
            if( Ext.get('html_TxtB_OldID').dom.value == "" )
            ...{
                tradeNode(tree.getRootNode());
                Ext.get('html_TxtB_OldID').dom.value=result;
                result="";
            }
        }
        function tradeNode(node)
        ...{   
            if (node.childNodes && node.childNodes.length>0)
            ...{
                var child;
                for (var i=0;i<node.childNodes.length;i++)
                ...{

                    child = node.childNodes[i];
                    if (child!=null && child.text.length>0 )
                    ...{
                        tradeList(child,child.text);
                    }
                }
            }
        }
        function tradeList(prant,children)
        ...{            
            if(prant.childNodes && prant.childNodes.length>0)
            ...{
                var list;
                for (var i=0;i<prant.childNodes.length;i++)
                ...{

                    list = prant.childNodes[i];
                    if (list!=null && list.text.length>0 )
                    ...{

                       result+= list.id +"|";  
                       tradeList(list,list.text);                        
                    }
                }

            }
        }
        
        var Newlvl = "";
        var NewRoot = "";
        
        function FindList()
        ...{        
            FindNew(tree.getRootNode());
            Ext.get('html_TxtB_New').dom.value=Newlvl;
            Ext.get('html_TxtB_Root').dom.value=NewRoot;            
            Newlvl="";
            NewRoot=""

        }
        function FindNew(node)
        ...{   
            if (node.childNodes && node.childNodes.length>0)
            ...{
                var child;
                for (var i=0;i<node.childNodes.length;i++)
                ...{

                    child = node.childNodes[i];
                    if (child!=null && child.text.length>0 )
                    ...{
                        NewRoot += child.text + "|";
                        Newlvl += "$";
                        FindNewList(child,child.text);
                    }
                }
            }
        }
        function FindNewList(prant,children)
        ...{            
            if(prant.childNodes && prant.childNodes.length>0)
            ...{
                var list;
                for (var i=0;i<prant.childNodes.length;i++)
                ...{

                    list = prant.childNodes[i];
                    if (list!=null && list.text.length>0 )
                    ...{
                       Newlvl+= list.text+":"+children +"|";  
                       FindNewList(list,list.text);                        
                    }
                }

            }
        }
        
         script >
     body >
HTML >

 

在这里我只把前台代码贴出来了，因为后台代码毕竟业务很复杂，而且没有必要全部贴出，所以就不贴了。只是这个ajax页面用于返还tree加载时候的字符串。

 

现在我来具体说明一下里面的代码。

 

Extjs加载时候 是在 Ext.onReady进行的。

从

var  listree1  =   new  Ext.tree.TreePanel

这句话开始 则是加载右边的tree。先是设定右边tree的属性。

 

el: ' list1 ' ,
                    animate: true , 
                    autoScroll: true ,
                    enableDD: true ,
                    containerScroll:  true ,
                    lines: false ,
                    
                    rootVisible: false ,
                    dropConfig:  ... {appendOnly:true}

然后在这里给这个tree加载一个默认的根

var  root  =   new  Ext.tree.AsyncTreeNode( ... {
                    draggable:false, 
                    id:'source'
                } );

 

然后就是加载树了（关键地方我加了注释）：

 

var  tree; // 定义一个全局的 tree 变量，方便后面调用
             var  RightTreeLoad  =   function () ... {
            var Tree = Ext.tree;
            return ...{
                 init : function()...{
                   tree = new Tree.TreePanel(...{
                        el:'tree',
                        animate:true, 
                        autoScroll:true,
                        loader: new Tree.TreeLoader(...{dataUrl:'CorpGroupAjax.aspx?corpcode='+Ext.get('html_TxtB_corpcode').dom.value}),//Ext.get('html_TxtB_corpcode').dom.value是搜寻的文本框的值
                        enableDD:true,
                        containerScroll: true,
                        dropConfig: ...{appendOnly:true}
                    });
                    new Tree.TreeSorter(tree, ...{folderSort:true});
                    var root = new Tree.AsyncTreeNode(...{
                        text: corpName,  //加载公司名称
                        draggable:false, 
                        id:'source'
                    });
                    tree.setRootNode(root);
                    tree.render();
                    root.expand(true, false);   //加载并展开节点
                    tree.on('click',function(e)...{//在点击事件时触发的JS
                        SaveList();
                    });                     
                    tree.on('enddrag',function(Node,e)...{//当拖动结束后触发的JS
                        SaveList();
                        FindList();
                    });   
                     //凡是tree的时间都写在这里。         
                }                                 
            };

 

下面这句话就是当页面加载的时候，并执行

 

Ext.EventManager.onDocumentReady(RightTreeLoad.init, RightTreeLoad,  true );

 

下面是点击搜寻按钮后，在左边加载的方法：

 

  // 左侧列表加载
        TreeShow  =   function () ... {
            return ...{
                 init : function()...{
                    var listree = new Ext.tree.TreePanel(...{
                        el:'list',
                        animate:true, 
                        autoScroll:true,
                        loader: new Ext.tree.TreeLoader(...{dataUrl:'CorpGroupAjax.aspx?Search='+escape(Ext.get('TxtB_Query').dom.value)}),
                        enableDD:true,
                        containerScroll: true,
                        lines:false,
                        title:corpName,
                        rootVisible:false
                    });
                    new Ext.tree.TreeSorter(listree, ...{folderSort:true});
                    var root = new Ext.tree.AsyncTreeNode(...{
                        draggable:false, 
                        id:'source'   
                    });
                    listree.setRootNode(root); 
                    listree.render();
                    root.expand(true, false);
                    listree.on('enddrag',function(Node,e)...{
                        FindList();
                    });  
                 }
             };

 

 

下面的JS则是在保存前取出对应的ID和文本。

 

< script language = " javascript " >
         result = "" ;
         function  SaveList()
         ... {
            if( Ext.get('html_TxtB_OldID').dom.value == "" )
            ...{
                tradeNode(tree.getRootNode());
                Ext.get('html_TxtB_OldID').dom.value=result;
                result="";
            }
        }
         function  tradeNode(node)
         ... {   
            if (node.childNodes && node.childNodes.length>0)
            ...{
                var child;
                for (var i=0;i<node.childNodes.length;i++)
                ...{

                    child = node.childNodes[i];
                    if (child!=null && child.text.length>0 )
                    ...{
                        tradeList(child,child.text);
                    }
                }
            }
        }
         function  tradeList(prant,children)
         ... {            
            if(prant.childNodes && prant.childNodes.length>0)
            ...{
                var list;
                for (var i=0;i<prant.childNodes.length;i++)
                ...{

                    list = prant.childNodes[i];
                    if (list!=null && list.text.length>0 )
                    ...{

                       result+= list.id +"|";  
                       tradeList(list,list.text);                        
                    }
                }

            }
        }
        
         var  Newlvl  =   "" ;
         var  NewRoot  =   "" ;
        
         function  FindList()
         ... {        
            FindNew(tree.getRootNode());
            Ext.get('html_TxtB_New').dom.value=Newlvl;
            Ext.get('html_TxtB_Root').dom.value=NewRoot;            
            Newlvl="";
            NewRoot=""

        }
         function  FindNew(node)
         ... {   
            if (node.childNodes && node.childNodes.length>0)
            ...{
                var child;
                for (var i=0;i<node.childNodes.length;i++)
                ...{

                    child = node.childNodes[i];
                    if (child!=null && child.text.length>0 )
                    ...{
                        NewRoot += child.text + "|";
                        Newlvl += "$";//得到所有第二层的根节点
                        FindNewList(child,child.text);
                    }
                }
            }
        }
         function  FindNewList(prant,children)
         ... {            
            if(prant.childNodes && prant.childNodes.length>0)
            ...{
                var list;
                for (var i=0;i<prant.childNodes.length;i++)
                ...{

                    list = prant.childNodes[i];
                    if (list!=null && list.text.length>0 )
                    ...{
                       Newlvl+= list.text+":"+children +"|";  //循环加载节点的文本
                       FindNewList(list,list.text);                        
                    }
                }

            }
        }
        
         script >

 

其中值得注意到是：

1、叶子节点的属性中设置为children:[]，则可以在叶子节点下面添加节点了

2、无论在加载或者取值的时候，都需要递归遍历。

3、在网上有一种方式是通过一个json的dll，实现了DataSet与tree之间互相转换，这个dll可以到json的官方网站去下载，这个要方便得多。