Ext Js简单Tree创建及其异步加载

对于Ext Js的树的使用也是比较多的，本篇分享简单的Tree的创建及其树的异步加载处理。

1.简单TreePanel的创建

function creatTree() {//创建简单的树
    //节点集合创建
    var rootNode = new Ext.tree.TreeNode({ id: 'root', text: '根节点', expanded: true }); //只展开根节点(只展开某节点)
    var node1 = new Ext.tree.TreeNode({ id: 'node1', text: 'Node1', leaf: true }); //为叶子节点
    var node2 = new Ext.tree.TreeNode({ id: 'node2', text: 'Node2' });
    var node3 = new Ext.tree.TreeNode({ id: 'node3', text: 'Node3', expanded: true });

    var arrNodes = [//节点集合
            new Ext.tree.TreeNode({ id: 'nodeOne', text: 'NodeOne' }),
            new Ext.tree.TreeNode({ id: 'nodeTwo', text: 'NodeTwo' }),
            new Ext.tree.TreeNode({ id: 'nodeThree', text: 'NodeThree' })
            ];
    var arrayNodes = [new Ext.tree.TreeNode({ text: 'nodeOne' }), new Ext.tree.TreeNode({ text: 'nodeTwo' })];

    node2.appendChild(arrayNodes); //将集合节点添加到对应的节点
    node3.appendChild(arrNodes);

    rootNode.appendChild(node1); //根节点添加对应的节点
    rootNode.appendChild(node2);
    rootNode.appendChild(node3);

    //也可以如下添加节点集合
    //rootNode.appendChild([node1, node2, node3]); //添加节点集合

    var treePanel = new Ext.tree.TreePanel({
        renderTo: Ext.getBody(),  150, root: rootNode,
        animate: true, //是否动画
        enableDD: true, //是否拖拽操作
        useArrows: true, //使用Vista-style箭头
        autoScroll: true, //是否自动滚动条
        containerScroll: true//向ScrollManager注册此容器 
    });
}

2.简单TreePanel的使用

//简单的树的练习
function treeTest() {
    var rootNode = new Ext.tree.TreeNode({//创建根节点
        id: 'root', text: '树的根', nodeType: 'async'
    });

    rootNode.appendChild(new Ext.tree.TreeNode({ id: 'node1', text: 'Node1', leaf: true })); //是叶子节点,将不能添加子节点
    rootNode.appendChild(new Ext.tree.TreeNode({ id: 'node2', text: 'Node2', leaf: true }));

    var node3 = new Ext.tree.TreeNode({ id: 'node3', text: 'Node3' }); //创建节点3
    var arrNodes = [//节点集合
            new Ext.tree.TreeNode({ id: 'node30', text: 'Node30' }),
            new Ext.tree.TreeNode({ id: 'node31', text: 'Node31' }),
            new Ext.tree.TreeNode({ id: 'node32', text: 'Node32' })];
    node3.appendChild(arrNodes); //将节点集合添加到节点3中
    rootNode.appendChild(node3); //将节点3添加到根节点中

    var treePanel = new Ext.tree.TreePanel({//创建节点树对象
        renderTo: Ext.getBody(), root: rootNode,  200, animate: true, enableDD: true //animate动画效果,enableDD拖拽效果
    });

    //tree.getRootNode().expand(); //某个节点展开
    //node.expand(true);
    treePanel.expandAll(); //展开树下的所有节点

    //该节点下的所有子节点都触发
    //node3.eachChild(function () { alert('TT') });

    //某个节点(节点3)点击事件,鼠标位置
    //node3.on('click', function (node, e) { Ext.Msg.alert('信息提示', '你点击' + node.text + '的节点' + e.getXY()) });

    treePanel.on('click', function (node) {//所有节点都触发改事件
        if (node.hasChildNodes()) {//判断该节点是否含有子节点
            var msg = node.text + '有子节点：';

            var childNodes = node.childNodes; //取得该节点下的所有子节点
            for (var i = 0; i < childNodes.length; i++) {//遍历子节点集合
                msg += childNodes[i].text + '|'; //拼接节点集合文本信息
            }
            Ext.Msg.alert('信息提示', msg);
        } else {
            if (node.isLeaf()) {//判断该节点是否为叶子节点
                Ext.Msg.alert('信息提示', '你点击的是叶子节点:' + node.text);
            }
        }
    })
}

3.简单前台Ext Js对树的增删改

//前台ExtJs操作对树的增删改操作
function treeOperation() {
    var root = new Ext.tree.TreeNode({ text: '根节点' });
    var treePanel = new Ext.tree.TreePanel({
         300, height: 600, renderTo: Ext.getBody(), root: root, id: 'testTree',
        tbar: [
                        { text: '添加同级节点', handler: function () { singleNodeInfo('addSibling', 'testTree'); } },
                        { text: '添加下级节点', handler: function () { singleNodeInfo('addChild', 'testTree'); } },
                        { text: '修改节点', handler: function () { singleNodeInfo('update', 'testTree'); } },
                        { text: '删除节点', handler: function () { removeNode('testTree'); } }
                      ]
    });

    //treePanel.on('contextmenu', function (node, e) { var myMenu = createMenu(); node.select(); myMenu.showAt(e.getPoint()); });
    //对于节点内容的操作,也可以使用Ext.Msg.prompt来处理，如下：
    //Ext.msg.prompt('请输入节点名称', '节点名称:', function (btn, text) { if (btn == 'ok') { alert(text); } });
}
function removeNode(treePanelID) {//删除节点,参数:树ID
    var treePanel = Ext.getCmp(treePanelID);
    var selNode = treePanel.selModel.getSelectedNode();
    if (selNode == null) {
        Ext.Msg.alert('信息提示', '请选择你要删除的节点！');
        return;
    }
    if (!selNode.hasChildNodes()) {//是否包含子节点
        var removeNode = selNode.remove(); //其父节点移除自己
        Ext.Msg.alert('信息提示', '你移除了节点' + removeNode.text);
    }
    else {
        Ext.Msg.confirm('信息提示', '该节点为父节点,一并删除？', function (btn) {
            if (btn == 'yes') {
                selNode.removeAll(); //连同下面的子节点一起删除
            }
        });
    }
}
function AddAndUpdateNode(type, selNode, nodeName) {//添加\修改节点,参数:操作类型\选中节点\节点名字
    if (selNode != null) {
        switch (type) {
            case 'addChild': //添加子节点
                var addNode = new Ext.tree.TreeNode({ text: nodeName });
                selNode.appendChild(addNode);
                break;
            case 'addSibling': //添加同级节点
                var addNode = new Ext.tree.TreeNode({ text: nodeName });
                var parentNode = selNode.parentNode.appendChild(addNode);
                break;
            case 'update': //修改文本内容
                selNode.setText(nodeName);
                break;
        }
        selNode.expand(); //选中节点展开
    }
}
function singleNodeInfo(type, treeId) {//参数:操作类型,treePanel对象
    var treePanel = Ext.getCmp(treeId);
    var selNode = treePanel.selModel.getSelectedNode(); //获取选中的节点
    if (selNode == null) {
        Ext.Msg.alert('信息提示', '请选择一个节点');
        return;
    }
    var win = new Ext.Window({//弹出信息对话框
        title: '添加修改节点',  230, height: 100,
        bodyStyle: "padding-top:10px",
        items: [
                    { xtype: 'label', text: '节点名字:',  200 },
                    { xtype: 'textfield', id: 'txtNodeName' }
                ],
        bbar: [
                    { text: '保存', handler: function () {
                        var nodeName = Ext.getCmp('txtNodeName').getValue();
                        AddAndUpdateNode(type, selNode, nodeName); //更新数据
                        Ext.Msg.alert('信息提示', '保存成功！'); win.close();
                    }
                    }, '->',
                    { text: '取消', handler: function () { win.close(); } }
                    ]
    });
    if (type == "update") {
        Ext.getCmp('txtNodeName').setValue(selNode.text);
    }
    win.show(); //显示信息
}

//你也可以试试添加一个右键菜单对节点进行操作
function createMenu() {
    var myMenu = new Ext.menu.Menu(
                    { xtype: 'button', text: '添加节点', handler: function (tree) { Ext.Msg.alert('信息提示', '添加节点'); } },
                    { xtype: 'button', text: '下级节点', handler: function () { Ext.Msg.alert('信息提示', '下级节点'); } },
                    { xtype: 'button', text: '修改节点', handler: function () { Ext.Msg.alert('信息提示', '修改节点'); } },
                    { xtype: 'button', text: '删除节点', handler: function () { Ext.Msg.alert('信息提示', '删除节点'); } }
                    );
    return myMenu;
}

4.简单树的异步加载(需要创建异步节点Ext.tree.AsyncTreeNode并使用Ext.tree.TreeLoader加载)(注意对于叶子节点的指定)

function treeAsyncTest() {//树的异步加载,一次加载对应的数据
    var treePanel = new Ext.tree.TreePanel({
        el: 'divTree', //渲染divID
         150, height: 300, animate: true, enableDD: true, rootVisible: true,
        loader: new Ext.tree.TreeLoader({ url: 'TestTreeAjx.ashx', baseParams: { Option: 'GetAllData'} })
    });
    var rootNode = new Ext.tree.AsyncTreeNode({ text: '根节点' });

    treePanel.setRootNode(rootNode);
    treePanel.render(); //进行渲染
    rootNode.expand(true, true); //参数1:展开所有节点;参数2:启动动画效果
    //这样操作完你会发现所有的节点可能会无限的延展下去，
    //是因为数据引起的，在加载时，传出的数据指定最后一级为叶子节点就可以了
}

5.针对不同的节点异步加载不同的节点数据（注意对于叶子节点的指定）

function treeNodeAsync() {//根据不同的节点值,获取不同的加载数据(可以是节点ID\节点文本等等)
    var rootNode = new Ext.tree.AsyncTreeNode({ text: 'rootNode' });
    var treePanel = new Ext.tree.TreePanel({
        el: 'divTree',
         150, height: 300, animate: true, enableDD: true, rootVisible: true,
        listeners: {
            'beforeload': function (node) {//按这种形式传递的数据,不指定最后的叶子节点的话,会遍历每个节点,性能不好(如果需要,在对应节点下指定叶子节点)
                node.loader = new Ext.tree.TreeLoader({ url: 'TestTreeAjx.ashx', baseParams: { Option: 'GetNodeData', NodeText: node.text} })
            }
        }
    });

    treePanel.setRootNode(rootNode);
    //这里可以试试对于节点展开和非展开所有节点的数据加载情况
    //一次展开所有节点,会一次遍历完毕加载数据；不展开节点折叠起来,会在对应节点展开需加载时加载对应数据
    rootNode.expand(false, true);
    treePanel.render();
}

6.其Ajax请求页面TestTreeAjx.ashx代码（简单的模拟数据）

namespace WebExtJS.WebTest
{
    /// <summary>
    /// TestTreeAjx 的摘要说明
    /// </summary>
    public class TestTreeAjx : IHttpHandler
    {
        private static IDictionary<int, List<Node>> dic = null;
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";

            string strOption = context.Request["Option"] != null ? context.Request["Option"].ToString() : string.Empty;
            string nodeText = context.Request["NodeText"] != null ? context.Request["NodeText"].ToString() : string.Empty;
            string strMessage = string.Empty;

            dic = GetData();

            switch (strOption)
            {
                case "GetAllData": strMessage = GetAllData(dic); break;
                case "GetNodeData": strMessage = GetNodeData(nodeText); break;
                default: break;
            }

            context.Response.Write(strMessage);
            context.Response.End();
        }

        /// <summary>
        /// 获取全部的数据
        /// </summary>
        /// <returns></returns>
        private string GetAllData()
        {
            string data = "[{text:'Node1',leaf:true},"
              + "{text:'Node2',children:[{text:'Node20',leaf:true},{text:'Node21',leaf:true}]},"
              + "{text:'Node3',children:[{text:'Node30',leaf:true},{text:'Node31',leaf:true},{text:'Node32',leaf:true}]}]";
            return data;
        }

        /// <summary>
        /// 根据不同的节点文本获取对应的节点
        /// </summary>
        /// <param name="nodeText"></param>
        /// <returns></returns>
        private string GetNodeData(string nodeText)
        {
            string json = string.Empty;

            switch (nodeText)
            {//指定叶子节点遍历非叶子节点(如果在其父节点指定为叶子节点,将不会加载对应的节点数据)
                case "rootNode": json = "[{text:'Node1',leaf:true},{text:'Node2'},{text:'Node3'}]"; break;
                case "Node2": json = "[{text:'Node20',leaf:true},{text:'Node21',leaf:true}]"; break;
                case "Node3": json = "[{text:'Node30',leaf:true},{text:'Node31',leaf:true},{text:'Node32',leaf:true}]"; break;
            }

            //switch (nodeText)
            //{//不指定叶子节点遍历每一个节点
            //    case "rootNode": json = "[{text:'Node1'},{text:'Node2'},{text:'Node3'}]"; break;
            //    case "Node2": json = "[{text:'Node20'},{text:'Node21'}]"; break;
            //    case "Node3": json = "[{text:'Node30'},{text:'Node31'},{text:'Node32'}]"; break;
            //}

            return json;
        }
        
        /// <summary>
        /// 简单字典模拟数据
        /// </summary>
        /// <returns></returns>
        private IDictionary<int, List<Node>> GetData()
        {
            IDictionary<int, List<Node>> dic = new Dictionary<int, List<Node>>();
            List<Node> nodeRoot = new List<Node>();
            List<Node> Node1 = new List<Node> { new Node(10, "Node10") };
            List<Node> Node2 = new List<Node> { new Node(20, "Node20"), new Node() { NodeID = 21, NodeName = "Node21" }, new Node() { NodeID = 22, NodeName = "Node22" } };
            List<Node> Node3 = new List<Node> { new Node(30, "Node30"), new Node(31, "Node31"), new Node(32, "Node32"), new Node(33, "Node33") };

            dic.Add(0, nodeRoot);//处理根节点
            dic.Add(1, Node1);
            dic.Add(2, Node2);
            dic.Add(3, Node3);

            return dic;
        }

        /// <summary>
        /// 遍历拼接,获取全部数据
        /// </summary>
        /// <param name="dic"></param>
        /// <returns></returns>
        private string GetAllData(IDictionary<int, List<Node>> dic)
        {
            string json = string.Empty;
            json = "[";
            if (dic.Count > 0)
            {
                for (int i = 0; i < dic.Count; i++)
                {
                    List<Node> tempNode;
                    if (dic[i].Count == 0)//根节点判断
                    {
                        continue;
                    }
                    else
                    {
                        tempNode = dic[i];
                    }

                    if (tempNode.Count == 1)//只有一个叶子节点
                    {
                        json += "{text:'" + tempNode[0].NodeName + "'},";
                    }
                    else
                    {
                        json += "{text:'" + tempNode[0].NodeName + "',children:[";
                        for (int j = 1; j < tempNode.Count; j++)//对其叶子节点遍历
                        {
                            json += "{text:'" + tempNode[j].NodeName + "',leaf:true},";
                        }
                        if (json.IndexOf(',') > 0)
                        {
                            json = json.Substring(0, json.LastIndexOf(','));
                        }
                        json += "]},";//闭合该节点
                    }
                }

            }
            if (json.IndexOf(',') > 0)
            {
                json = json.Substring(0, json.LastIndexOf(','));
                json += "]";
            }
            return json;
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

    public class Node
    {
        public Node() { }
        public Node(int nodeID, string nodeName)
        {
            this.NodeID = nodeID;
            this.NodeName = nodeName;
        }
        public int NodeID;
        public string NodeName;
    }
}