Ext动态树详解

最近在学习Ext，在园子里也看了好多别人的文章，今天自己动手来实现一个动态树。首先先看效果图吧

 

 

 

 

 

 

 

效果就如上面所示，接下来一步一步来实现吧！代码只贴关键部分！

第一 数据库表的设计 还是请大家看图

很简单的表，就不说了。

第二 数据层用Linq 文件是：TreeLinqAccess

代码

   
   

    
            
    
    public
    
     List
    
    <
    
    TreeItem
    
    >
    
     GetTreeByPid(string pid)
        {
            
    
    var
    
     q 
    
    =
    
     
    
    from
    
     t 
    
    in
    
     db.TreeItem
                    
    
    where
    
     t.pid 
    
    ==
    
     pid
                    
    
    select
    
     t;
            
    
    return
    
     q.ToList();
        }
   
   

第三 数据层与Ext的交互用ashx类型的一般处理程序

 

代码

   
   

    
        
    
    public
    
     
    
    void
    
     GetTreeNode()
    {
        
    
    object
    
     node 
    
    =
    
     Convert.ToString(Request[
    
    "
    
    node
    
    "
    
    ]);
        
        
    
    if
    
     (node 
    
    !=
    
     
    
    null
    
     )
        {
            StringBuilder jsonData 
    
    =
    
     
    
    new
    
     StringBuilder();
            
    
    string
    
     pid 
    
    =
    
     Request[
    
    "
    
    node
    
    "
    
    ].Trim();
            List
    
    <
    
    TreeItem
    
    >
    
     ls 
    
    =
    
     access.GetTreeByPid(pid);
            
            
    
    if
    
    (ls.Count
    
    >
    
    0
    
    )
            {
                jsonData.Append(
    
    "
    
    [
    
    "
    
    );

                
    
    foreach
    
     (TreeItem nodes 
    
    in
    
     ls)
                {
                    {
                        JsonConvert
    
    <
    
    TreeItem
    
    >
    
     json 
    
    =
    
     
    
    new
    
     JsonConvert
    
    <
    
    TreeItem
    
    >
    
    ();
                        
    
    bool
    
     isLeaf 
    
    =
    
     access.GetTreeByPid(nodes.id).Count 
    
    ==
    
     
    
    0
    
     
    
    ?
    
     
    
    true
    
     : 
    
    false
    
    ;
                        
    
    string
    
     nodeJsonString 
    
    =
    
     json.ToTreeNode(nodes.id, nodes.text, isLeaf).ToString();
                        jsonData.Append(nodeJsonString);
                        jsonData.Append(
    
    "
    
    ,
    
    "
    
    );
                    }

                }

                
    
    //
    
    去掉末尾“,”号
    
    

    
                    
    
    if
    
     (jsonData[jsonData.Length 
    
    -
    
     
    
    1
    
    ] 
    
    ==
    
     
    
    '
    
    ,
    
    '
    
    )
                {
                    jsonData.Remove(jsonData.Length 
    
    -
    
     
    
    1
    
    , 
    
    1
    
    );
                }

                jsonData.Append(
    
    "
    
    ]
    
    "
    
    );
            }

            Response.Write(jsonData);
            Response.End();
        }
    }
   
   

这里简单说明下:

　　1 access是上面Linq的实例 如：TreeLinqAccess access = new TreeLinqAccess()

　　2 Request["node"] 接收到的node是对应ext树的id

　　3 toTreeNode是app_code里的方法

代码

   
   

    
        
    
    public
    
     StringBuilder ToTreeNode(
    
    string
    
     id, 
    
    string
    
     text, 
    
    bool
    
     isLeaf)
    {
        StringBuilder jsonData 
    
    =
    
     
    
    new
    
     StringBuilder();

        jsonData.Append(
    
    "
    
    {
    
    "
    
    );
        jsonData.Append(
    
    "
    
    id:'
    
    "
    
    );
        jsonData.Append(id);
        jsonData.Append(
    
    "
    
    ',text:'
    
    "
    
    );
        jsonData.Append(text);
        jsonData.Append(
    
    "
    
    '
    
    "
    
    );
        jsonData.Append(
    
    "
    
    ,leaf:
    
    "
    
    );
        jsonData.Append(isLeaf.ToString().ToLower());
        jsonData.Append(
    
    "
    
    }
    
    "
    
    );

        
    
    return
    
     jsonData;
    }
   
   

第四 ext代码

 

代码

   
   

    
    var
    
     dTree 
    
    =
    
     
    
    new
    
     Ext.tree.TreePanel({
        id: 
    
    '
    
    myDynamicTree
    
    '
    
    ,
        renderTo: 
    
    '
    
    mainTab_DynamicTree
    
    '
    
    ,
        title: 
    
    '
    
    Ext动态树
    
    '
    
    ,
        width: 
    
    150
    
    ,
        animate: 
    
    true
    
    ,  
    
    //
    
    以动画形式伸展,收缩子节点
    
    

    
            collapsible: 
    
    true
    
    ,
        autoHeight: 
    
    true
    
    ,
        autoScroll: 
    
    true
    
    ,
        rootVisible: 
    
    true
    
    ,
        
    
    //
    
    lines:true,
    
    

    
            
    
    //
    
    useArrows: true, //小箭头样式 默认是+-
    
    

    
            loader: 
    
    new
    
     Ext.tree.TreeLoader({
            dataUrl: 
    
    "
    
    ../Service/TreeService.ashx?Method=GetTreeNode
    
    "
    
    
        }),
        root: 
    
    new
    
     Ext.tree.AsyncTreeNode({
            id: 
    
    '
    
    0
    
    '
    
    ,
            text: 
    
    '
    
    根节点
    
    '
    
    ,
            expanded: 
    
    true
    
    
        }),
        listeners: 
    
    //
    
    监听事件
    
    

    
            {
            
    
    '
    
    click
    
    '
    
    : 
    
    function
    
    (node, e) {
                Ext.MessageBox.alert(
    
    "
    
    点击的节点
    
    "
    
    , 
    
    "
    
    text:
    
    "
    
     
    
    +
    
     node.text 
    
    +
    
     
    
    "
    
    |
    
    "
    
     
    
    +
    
     
    
    "
    
    id:
    
    "
    
     
    
    +
    
     node.id);
            }
        }
    });