zoukankan      html  css  js  c++  java
  • Extjs4——向TreeStore中加载数据

    这里分别介绍使用JSON本地数据,JSP和XML向TreeStore中加载数据的实现方式

    1.本地JSON数据:

    注意txt文件中叶子节点一定要加上leaf:true的属性,否则文件会无限展开的

       var tree = new Ext.tree.TreePanel({
            store: new Ext.data.TreeStore({
                proxy: {
                    type: 'ajax',
                    url: '01-04-02.txt'
                },
                root: {
                    text: '我是根'
                }
            })
        });
    
        tree.render('tree');

    01-04-02.txt内容如下:

    [
        {text:'01',children:[
            {text:'01-01',leaf:true},
            {text:'01-02',children:[
                {text:'01-02-01',leaf:true},
                {text:'01-02-02',leaf:true}
            ]},
            {text:'01-03',leaf:true}
        ]},
        {text:'02',leaf:true}
    ]

    最后的效果如下:

    2.使用JSP提供后台数据:

    注意一定要为树形中的节点设置id,不能重复,后台会根据id来判断究竟是哪个节点正在展开,从而返回对应的数据,如果不设置root的ID,Ext会默认根节点的ID为root。

    前台代码如下:

        var tree = new Ext.tree.TreePanel({
            store: new Ext.data.TreeStore({
                proxy: {
                    type: 'ajax',
                    url: '01-05-01.jsp'
                },
                root: {
                    text: '我是根'
                }
            })
        });
    
        tree.render('tree');

    后台JSP代码:

    <%@ page contentType="text/html;charset=utf-8"%>
    <%
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
    
        // 获得node参数,对应的是正在展开的节点id
        String node = request.getParameter("node");
        System.out.println(node);
    
    
        String json = "";
        if ("0".equals(node)) {
            json += "[{id:1,text:'节点阿一'},{id:2,text:'节点阿二'}]";
        } else if ("1".equals(node)) {
            json += "[{id:11,text:'节点阿一一',leaf:false},{id:12,text:'节点阿一二',leaf:true}]";
        } else if ("2".equals(node)) {
            json += "[{id:21,text:'节点阿二一',leaf:true},{id:22,text:'节点阿二二',leaf:true}]";
        } else if ("11".equals(node)) {
            json += "[{id:111,text:'节点阿一一一',leaf:true},{id:112,text:'节点阿一一二',leaf:true}]";
        }
    
        response.getWriter().print(json);
    %>

    分析下后台代码:

    树形异步读取的关键是node参数,当某个节点展开时,TreeStore会根据设置的url地址去后台读取数据。而当发送请求时,TreeStore会把这个节点的ID作为参数一起发送到后台去。对后台来说,只要获得node参数,就知道是哪个节点正在展开。接着会根据节点的ID返回对应的json数据。

    效果如下:

    3.XML数据:

     var store = Ext.create('Ext.data.TreeStore', {
            proxy: {
                type: 'ajax',
                url: '01-06-01.xml',
                extraParams: {
                    isXml: true
                },
                reader: {
                    type: 'xml',
                    root: 'nodes',
                    record: 'node'
                }
            },
            sorters: [{
                property: 'leaf',
                direction: 'ASC'
            },{
                property: 'text',
                direction: 'ASC'
            }],
            root: {
                text: 'Ext JS',
                id: 'src',
                expanded: true
            }
        });
    
        // create the Tree
        var tree = Ext.create('Ext.tree.Panel', {
            store: store,
            hideHeaders: true,
            rootVisible: true,
            viewConfig: {
                plugins: [{
                    ptype: 'treeviewdragdrop'
                }]
            },
            height: 350,
             400,
            title: 'Directory Listing',
            renderTo: 'tree',
            collapsible: true
        });

    效果如下:

  • 相关阅读:
    trackr: An AngularJS app with a Java 8 backend – Part III
    trackr: An AngularJS app with a Java 8 backend – Part II
    21. Wireless tools (无线工具 5个)
    20. Web proxies (网页代理 4个)
    19. Rootkit detectors (隐形工具包检测器 5个)
    18. Fuzzers (模糊测试器 4个)
    16. Antimalware (反病毒 3个)
    17. Debuggers (调试器 5个)
    15. Password auditing (密码审核 12个)
    14. Encryption tools (加密工具 8个)
  • 原文地址:https://www.cnblogs.com/chen1234/p/7542584.html
Copyright © 2011-2022 走看看