AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2017-10-11 1159
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

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(), width: 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, width: 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({
        width: 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: '添加修改节点', width: 230, height: 100,
        bodyStyle: "padding-top:10px",
        items: [
                    { xtype: 'label', text: '节点名字:', width: 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
        width: 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',
        width: 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;
    }
}
复制代码

本文转自SanMaoSpace博客园博客，原文链接：http://www.cnblogs.com/SanMaoSpace/archive/2013/02/04/2892173.html，如需转载请自行联系原作者
文章标签：
数据格式
JSON
JavaScript
前端开发
容器
关键词：
JavaScript异步加载
JavaScript tree
JavaScript ext
技术mix呢
目录
相关文章
雷霆半月斩掉你的板砖
|
6月前
|
JavaScript 数据处理
js通过pid将数据处理成tree
js通过pid将数据处理成tree
雷霆半月斩掉你的板砖
38 0
锅盖哒
|
JavaScript 前端开发 UED
异步加载 JavaScript
异步加载 JavaScript
锅盖哒
71 0
光明顶阳顶天
|
15天前
|
监控 JavaScript 前端开发
确定使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript
【10月更文挑战第24天】选择使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript 是一个需要综合考虑多个因素的决策。需要根据脚本之间的依赖关系、页面加载性能要求、脚本的功能和重要性等因素来进行权衡。在实际应用中，需要通过测试和验证来确定最适合的加载方式，以提供更好的用户体验和页面性能。
光明顶阳顶天
84 56
光明顶阳顶天
|
15天前
|
JavaScript 前端开发 Go
异步加载 JS 的方法
【10月更文挑战第24天】异步加载 JavaScript 是提高网页性能和用户体验的重要手段。通过使用不同的方法和技术，可以实现灵活、高效的异步加载 JavaScript。在实际应用中，需要根据具体情况选择合适的方法，并注意处理可能出现的问题，以确保网页能够正常加载和执行。
光明顶阳顶天
12 2
光明顶阳顶天
|
15天前
|
监控 JavaScript 前端开发
使用 `defer` 属性异步加载 JavaScript
【10月更文挑战第24天】使用 `defer` 属性异步加载 JavaScript 是一种有效的提高页面性能和用户体验的方法。通过合理设置 `defer` 属性，可以在不影响页面渲染的情况下异步加载脚本，并确保脚本的执行顺序。在实际应用中，需要根据具体情况选择合适的加载方式，并注意处理可能出现的问题，以确保页面能够正常加载和执行。
光明顶阳顶天
9 1
sunyalei
|
3月前
|
JavaScript Go
异步加载 JS 的方法
异步加载 JS 的方法
sunyalei
117 57
球球不吃虾
|
6月前
|
JavaScript 前端开发 Go
动态加载与异步加载 JavaScript 详解：加载远程js，加载成功后执行回调函数
动态加载与异步加载 JavaScript 详解：加载远程js，加载成功后执行回调函数
球球不吃虾
1135 2
嘘~！
|
6月前
|
Web App开发 移动开发 JavaScript
异步加载 js 的方法
异步加载 js 的方法
嘘~！
36 1
算精通
|
6月前
|
JavaScript 前端开发 Java
MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。
MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 和 Ext JS 都是 JavaScript 框架，用于开发 Web 应用程序。它们分别提供了不同的功能和特性，以帮助开发者更高效地构建和维护 Web 应用程序。
算精通
50 2
无妄的罪
|
6月前
|
JavaScript 前端开发 Go
异步加载JS的方法
异步加载JS的方法
无妄的罪
70 0

热门文章

最新文章

  • 1
    《JavaScript应用程序设计》一一2.9 方法API的设计
  • 2
    javascript类型系统之Array
  • 3
    好程序员web前端培训分享JavaScript学习笔记cookie
  • 4
    Andorid Freemarker与template.js使用
  • 5
    YY游戏云的angular js实践总结
  • 6
    走在JS上的全栈之路(一)
  • 7
    JavaScript值得注意的小知识点
  • 8
    HTML6 无 JavaScript 的单页应用引起一片哗然
  • 9
    js正则表达式语法
  • 10
    JS中document对象详解
  • 1
    前端框架与库 - Vue.js基础：模板语法、数据绑定
    134
  • 2
    《JavaScript权威指南第7版》中文PDF+英文PDF+源代码 +JavaScript权威指南(第6版)(附源码)PDF下载阅读分享推荐
    261
  • 3
    js【详解】arr.reduce() 数组缩减
    45
  • 4
    【vue】 vue2 | js 实现数字滚动效果
    104
  • 5
    【vue】 网站动态背景 | vanta.js的使用
    410
  • 6
    JavaScript进阶-JavaScript库与框架简介
    57
  • 7
    DVWA JavaScript 通关解析
    66
  • 8
    WEB三大主流框架之Vue.js
    44
  • 9
    断网之后的页面，Autox.js是点击还是上下滑动比较好？
    60
  • 10
    autox.js如何监听异常情况，比如网络中断、内存慢、应用死机或者页面无响应
    216

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • Node.js 入门教程文档
  • Node.js 入门与实战
  • Vue.js 入门与实战

    • 相关电子书

    更多
  • JavaScript异步编程
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
  • 搭建Node.js编程环境
    • 下一篇
    阿里云OSS设置跨域访问