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);
            }
        }
    });

 

到此一个动态树就完成了，欢迎大家提意见。