Extjs Treepanel

1.简单的树

效果图

代码

<script type="text/javascript" defer>
    Ext.onReady(function(){
        Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
        var tree = new Ext.tree.TreePanel({
            region: 'center',
            //True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部工具条
            collapsible: true,
            title: '标题',//标题文本
            width: 200,
            border : false,//表框
            autoScroll: true,//自动滚动条
            animate : true,//动画效果
            rootVisible: true,//根节点是否可见
            split: true,
            tbar:[{
                text:'展开',
                handler:function(){
                        tree.expandAll();
                }
            },'-',{
                text:'折叠',
                handler:function(){
                    tree.collapseAll();
                    tree.root.expand();
                }
            }],
            listeners: {
                click: function(node) {
                    //得到node的text属性
                    Ext.Msg.alert('消息', '你点击了: "' + node.attributes.text+"'");
                }
            }
        });
        var root = new Ext.tree.TreeNode({text:'我是根'});
        var root_node1 = new Ext.tree.TreeNode({text:'我是根的1枝'});
        var root_node2 = new Ext.tree.TreeNode({text:'我是根的2枝'});
        //插入节点为该节点的最后一个子节点
        root.appendChild(root_node1);
        root.appendChild(root_node2);
        //设置根节点
        tree.setRootNode(root);
        new Ext.Viewport({
            items: [tree]
        });
    });
</script>

2.使用TreeLoader获得后台数据

每个节点最后一级必须是叶子节点,否则会出现无限循环
TreeNode并不支持Ajax,需要把根节点换成AsyncTreeNode实现异步加载效果

list.txt

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

index.jsp

<script type="text/javascript" defer>
    Ext.onReady(function(){
        Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
        var tree = new Ext.tree.TreePanel({
            region: 'center',
            collapsible: true,
            title: 'TreeLoader获得后台数据',
            width: 200,
            border : false,
            autoScroll: true,
            animate : true,
            rootVisible: false,
            split: true,
            loader : new Ext.tree.TreeLoader({
                dataUrl : 'list.txt'
            }),
            root: new Ext.tree.AsyncTreeNode({
                //进入时是否展开
                expanded:false,
                text:'根节点'
            }),
            listeners: {
                afterrender: function(node) {
                    tree.expandAll();//展开树
                }
            }
        });
        new Ext.Viewport({
            items: [tree]
        });
    });
</script>

3.读取本地JSON数据

 

因为有的树形的数据并不多,为了获得如此少量的数据而使用Ajax访问后台不划算,
如果退回到每个节点都使用new来生成,又实在太麻烦,
那么能不能让TreeLoader读取本地的JavaScript中的JSON数据,然后生成需要的树节点呢

 

<script type="text/javascript" defer>
    Ext.onReady(function(){
        Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
        var tree = new Ext.tree.TreePanel({
            region: 'center',
            //True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部工具条
            collapsible: true,
            title: '标题',//标题文本
            width: 200,
            border : false,//表框
            autoScroll: true,//自动滚动条
            animate : true,//动画效果
            rootVisible: false,//根节点是否可见
            split: true,
            loader : new Ext.tree.TreeLoader(),
            root : new Ext.tree.AsyncTreeNode({
                text:'我是根',
                children:[{
                    text : '01',
                    children : [
                        { text : '01-01' , leaf : true },
                        { text : '01-02' , leaf : true }
                    ]
                },{
                    text :'02',
                    children : [
                        { text : '02-01' , leaf : true },
                        { text : '02-02' , leaf : true }
                    ]
                }]
            }),
            listeners: {
                afterrender: function(node) {
                    tree.expandAll();//展开树
                }
            }
        });
        new Ext.Viewport({
            items: [tree]
        });
    });
</script>

4.使用JSP提供后台数据

 

 

树形异步读取的关键是node参数,当某一个节点展开时,treeLoader会根据设置的dataUrl去后台读取数据,
而发送请求时,treeLoader会把这个节点的Id作为参数一起发送到后台,对于后台来说,只要获取node参数,
就知道是哪个节点正在执行展开,
如果返回的子节点数据包含leaf:true属性,AsyncTreeNode就会生成TreeNode节点,并标记为叶子

list.jsp

<%@ page language="java"  pageEncoding="UTF-8"%>
<%
    request.setCharacterEncoding("UTF-8");
    response.setCharacterEncoding("UTF-8");
    //获取node参数,对应的是正在展开的节点id
    String node = request.getParameter("node");
    System.out.println("node="+node);
    String json =
    "["+
    "{id:1,text:'01',"+
        "children:["+
            "{id:11,text:'01-01',leaf:true},"+
            "{id:12,text:'01-02',leaf:true}"+
         "]}"+
    ",{id:2,text:'02',"+
        "children:["+
            "{id:21,text:'02-01',leaf:true},"+
            "{id:22,text:'02-02',leaf:true}"+
         "]}"+
    "]";
    response.getWriter().write(json);
%>

index.jsp

<script type="text/javascript" defer>
    Ext.onReady(function(){
        Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
        var tree = new Ext.tree.TreePanel({
            region: 'center',
            collapsible: true,
            title: '标题',
            width: 200,
            border : false,
            autoScroll: true,
            animate : true,
            rootVisible: false,
            split: true,
            loader : new Ext.tree.TreeLoader({
                dataUrl : 'list.jsp'
            }),
            root : new Ext.tree.AsyncTreeNode({
                //设置id,让后台知道应该在何时返回根节点的子点数据
                id : '0',
                text : '我是根'
            }),
            listeners: {
                afterrender: function(node) {
                    tree.expandAll();//展开树
                }
            }
        });
        new Ext.Viewport({
            items: [tree]
        });
    });
</script>

5.树的事件

 

listeners: {
    click: function(node) {
        Ext.Msg.alert('消息', '你点击了: "' + node.attributes.text);

    },
    dblclick:function(node){
        alert('你双击了'+node);
    },
    expandnode:function(node){
        alert(node+'展开了'+node.attributes.text);
    },
    collapsenode:function(node){
        alert(node+'折叠了'+node.attributes.text);
    }
}

6.右边菜单

效果图

list.txt

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

index.jsp

<script type="text/javascript" defer>
    Ext.onReady(function(){
        Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
        var node_id;
        var tree = new Ext.tree.TreePanel({
            region: 'center',
            collapsible: true,
            title: '右键菜单',
            width: 200,
            border : false,
            animate : true,
            rootVisible: false,
            autoScroll: true,
            split: true,
            loader : new Ext.tree.TreeLoader({
                dataUrl : 'list.txt'
            }),
            root: new Ext.tree.AsyncTreeNode({
                //设置id,让后台知道应该在何时返回根节点的子点数据
                id : '0',
                text : '我是根'
            }),
            listeners: {
                afterrender: function(node) {
                        //展开树
                        tree.expandAll();
                    }
               }
        });
        var cc = new Ext.menu.Menu({
            items :[{
                text: '增加',
                handler : function(){
                    alert(node_id.attributes.text);
                    cc.hide();//隐藏
                }
            },{
                text: '删除',
                handler : function(){
                    alert('删除');
                }
            },{
                text: '修改',
                handler : function(){
                    alert('修改');
                }
            }]
        });
        tree.on('contextmenu',function(node,e){
            e.preventDefault();//阻止浏览器默认弹出功能菜单
            node.select();//选中当前节点
            //var array = new Array(500,500);//可以自定义坐标
            var array = e.getXY();//获取事件的页面坐标
            cc.showAt(array);//在指定的位置显示该菜单
            node_id = node;
        });
        new Ext.Viewport({
            items: [tree]
        });
    });
</script>

7.给树节点设置图片和超链接

 

list.txt

[{
        text : '01',
        children : [
            { text : '01-01' , leaf : true , icon : 'image/qq.jpg' },
            { text : '01-02' , leaf : true , href : 'http://www.baidu.com' }
        ]
    },{
        text :'02',
        children : [
            { text : '02-01' , leaf : true },
            { text : '02-02' , leaf : true }
        ]
}]

8.修改树节点的标题

 

list.txt

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

index.jsp

<script type="text/javascript" defer>
    Ext.onReady(function(){
        Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
        var tree = new Ext.tree.TreePanel({
            region: 'center',
            collapsible: true,
            title: '修改节点标题',
            width: 200,
            border : false,
            animate : true,
            rootVisible: false,
            autoScroll: true,
            split: true,
            loader : new Ext.tree.TreeLoader({
                dataUrl : 'list.txt'
            }),
            root: new Ext.tree.AsyncTreeNode({
                id : '0',
                text : '我是根'
            }),
            listeners: {
                afterrender: function(node) {
                   //展开树
                   tree.expandAll();
                }
            }
        });

        //为树节点提供即时的编辑功能
        var treeEditor = new Ext.tree.TreeEditor(tree,new Ext.form.TextField({
            allowBlank : false
        }));
        /*
            编辑器开始初始化,但在修改值之前触发,
            若事件句柄返回false则取消整个编辑事件
            editor : treeEditor本身
            value : 正被设置的值
        */
        treeEditor.on('beforestartedit',function(editor,element,value){
            var treeNode = editor.editNode;
            var boolean  = treeNode.isLeaf();
            return boolean;
        });
        /*
            完成修改后,按下Enter就会触发这个事件,我们可以监听函数得到修改后的数据
            editor : treeEditor本身
            value : 修改后的值
            startValue : 改变后的值
        */
        treeEditor.on('complete',function(editor,value,startValue){
            alert('将要设置的值: '+editor.editNode.text+' 原来的值: '+startValue+" 改变后的值: "+value)
        });

        new Ext.Viewport({
            items: [tree]
        });
    });
</script>

9.树的拖放

 

如果让树节点可以自由拖放,创建TreePanel时设置enableDD:true即可
不过直接设置只能实现叶子与枝干和根之间的拖放,叶子不能拖放到叶子下

list.txt

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

inde.jsp

<script type="text/javascript" defer>
    Ext.onReady(function(){
        Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
        var tree = new Ext.tree.TreePanel({
            region: 'center',
            collapsible: true,
            title: '树的拖动',
            width: 200,
            border : false,
            animate : true,
            rootVisible: false,
            autoScroll: true,
            split: true,
            enableDD : true,//支持拖放
            loader : new Ext.tree.TreeLoader({
                dataUrl : 'list.txt'
            }),
            root: new Ext.tree.AsyncTreeNode({
                id : '0',
                text : '我是根'
            }),
            listeners: {
                afterrender: function(node) {
                   //展开树
                   tree.expandAll();
                }
            }
        });
        new Ext.Viewport({
            items: [tree]
        });
    });
</script>

9.1 节点拖放的三种形式

 

append 放下去节点会变成被砸中节点的子节点,形成父子关系,绿色加号标志
above 放下的节点与目标节点是兄弟关系,放下去的节点排列在前,一个箭头两个短横线
below 放下的节点与目标节点是兄弟关系,放下去的节点排列在后,两个短横线一个箭头

9.2叶子不能append

tree.on('nodedragover',function(e){
    //获取事件的对象
    var node = e.target;//当鼠标指针经过的节点
    if(node.leaf){
        n.leaf = false;
    }
    return true;
});

9.3 判断拖放的目标

tree.on('nodedrop',function(e){
    Ext.Msg.alert('消息','我们的节点 '+e.dropNode+' 掉到了 '+e.target+' 上,掉落方式是 '+ e.point);
});

10.树的过滤器Ext.tree.TreeFilter

list.txt

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

index.jsp

<script type="text/javascript" defer>
    Ext.onReady(function(){
        Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
        var tree = new Ext.tree.TreePanel({
            region: 'center',
            collapsible: true,
            title: 'tree过滤器',
            width: 400,
            border : false,
            animate : true,
            rootVisible: false,
            autoScroll: true,
            split: true,
            loader : new Ext.tree.TreeLoader({
               dataUrl : 'list.txt'
            }),
            root : new Ext.tree.AsyncTreeNode({
                //设置id,让后台知道应该在何时返回根节点的子点数据
                id : '0',
                text : '我是根'
            }),
            listeners: {
                afterrender: function(node) {
                   //展开树
                   tree.expandAll();
                }
            },
            tbar:[{
                text:'显示02',
                handler:function(){
                    treeFiler.filter('02');//通过指定的属性过滤数据
                }
            },'-',{
                text:'显示全部',
                handler:function(){
                    treeFiler.clear();//清理现在的过滤
                }
            },'-',{
                xtype : 'textfield',
                //为HTML的input输入字段激活键盘事件的代理
                enableKeyEvents : true,
                listeners  : {
                    //这个事件只能在enableKeyEvents = true可用
                    keyup : function(e){
                        var t = this.getValue()
                        /****************过滤时应该避开叶子节点**********************/
                        //传递的字符串参数被正则表达式读取
                        var es = Ext.escapeRe(t);
                        var re = new RegExp(es,'i');
                        //通过一个函数过滤,函数返回true,那么该节点将保留
                        treeFiler.filterBy(function(n){
                            return !n.isLeaf() || re.test(n.text);
                        });
                        /**********不匹配的叶子节点的父节点也隐藏**************/
                        hiddenPkgs =[];
                        //从该节点开始逐层下报(Bubbles up)节点,上报过程中对每个节点执行指定的函数
                        tree.root.cascade(function(n){
                            //当节点有子节点的时候n.ui.ctNode.offsetHeight大于3
                            if(!n.isLeaf()&&n.ui.ctNode.offsetHeight<3){
                                n.ui.hide();
                                hiddenPkgs.push(n);
                            }
                        });
                    }
                }
            }]
        });
        var treeFiler = new Ext.tree.TreeFilter(tree,{
            clearBlank : true,//如果查询的字符串为空字符串,就执行clear()
            //每次过滤之前先执行clear()负责会在上次过滤结果的基础上进行查询
            autoClear : true
        });

        new Ext.Viewport({
            items: [tree]
        });
    });
</script>

11.利用TreeSorter对树进行排序

 

TreeSorter是一个专门用来对树节点进行排序的工具
caseSensitive 区分大小写,默认为false不区分大小写
dir 排列方式
folderSort 将叶子节点排列到非叶子节点后面 默认为false
leafAttr 判断叶子节点的标志,默认为leaf,如果node中存在leaf:true参数,就认为是叶子节点
property 根据节点属性排序,默认为text

代码

new Ext.tree.TreeSorter(tree,{
    folderSort : true
});

12.树形节点视图 Ext.tree.TreeNodeUI

Ext.treeTreeNodeUI是生成Ext.tree.TreeNode实例时默认使用的视图组件.
在生成每一个Ext.tree.TreeNode实例时,它会先查找this.attributes.uiProvider和this.defaultUI.
如果有任何一个属性存在,它就会使用这个属性创建自己的视图.
如果这两个属性都不存在就会适应Ext.tree.TreeNodeUI创建视图.
因此,在属性结构中通常都使用Ext.tree.TreeNodeUI作为树形节点的视图.
可以通过node.ui的方式获得某个Ext.tree.TreeNode实例对应的Ext.tree.TreeNodeUI

效果图

list.txt

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

index.jsp

<style type="text/css">
.big {
    font-weight: bold;
}
</style>
<script type="text/javascript" defer>
    Ext.onReady(function(){
        Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
        var tree = new Ext.tree.TreePanel({
            region: 'center',
            collapsible: true,
            title: '树形节点视图',
            width: 200,
            border : false,
            autoScroll: true,
            animate : true,
            rootVisible: false,
            split: true,
            loader : new Ext.tree.TreeLoader({
                dataUrl : 'list.txt'
            }),
            root : new Ext.tree.AsyncTreeNode({
                //设置id,让后台知道应该在何时返回根节点的子点数据
                id : '0',
                text : '我是根'
            }),
            listeners: {
                afterrender: function(node) {
                   //展开树
                   tree.expandAll();
                }
            }
        });
        new Ext.Viewport({
            items: [tree]
        });
        tree.on('click',function(node){
            //当用户点击一个节点,会获得节点对应的Ext.tree.TreeNodeUI实例
            var treeNodeUI = node.ui;
            //最后调用addClass()方法把文字转化为粗体
            treeNodeUI.addClass('big');
            (
                function(){
                    treeNodeUI.removeClass('big');
                }
            ).defer(1000);
        });
    });
</script>

 

treeNodeUI的方法
getAnchor(),getIconEl(),getTextEl()这3个函数可以分别获取页面上与树形对应的
<a>标签,包含图标的<img>标签,包含文字的<span>标签部分
hide()和show()函数可以控制树形节点是否隐藏
isChecked()和toggleCheck()函数可以判断和修改树形节点中的Checkbox的状态,这两属性必须节点包含Checkbox,否则isChecked()会一直返回false

13.表格与树的结合 Ext.ux.tree.ColumnTree()

 

Ext.ux.tree.ColumnTree属于EXT的扩展件,为了使用Ext.ux.tree.ColumnTree,
我们首先需要引用Ext发布包中的column-tree.css,ColumnNodeUI.css,以及ColumnNodeUI.js三个文件
需要注意的是:我们要给每一个节点设置uiProvider:'col',这样在生成树时TreeLoader会预先定义的uiProviders参数中取得'col'对应的Ext.ux.tree.ColumnNodeUI,用它来作为显示树形节点的视图

效果图

list.jsp

<%@ page language="java"  pageEncoding="UTF-8"%>
<%
    request.setCharacterEncoding("UTF-8");
    response.setCharacterEncoding("UTF-8");
    //获取node参数,对应的是正在展开的节点id
    String node = request.getParameter("node");
    System.out.println("node="+node);
    String json =
    "["+
    "{km:'深入浅出ExtJs',ks:'12month',js:'',uiProvider:'col',"+
        "children:["+
            "{km:'ExtJs01',ks:'6month',js:'lwc',uiProvider:'col',leaf:true},"+
            "{km:'ExtJs02',ks:'6month',js:'wr',uiProvider:'col',leaf:true}"+
         "]}"+
    ",{km:'深入浅出Java',ks:'10month',js:'',uiProvider:'col',"+
        "children:["+
            "{km:'Java01',ks:'4month',js:'tom',uiProvider:'col',leaf:true},"+
            "{km:'Java02',ks:'6month',js:'cat',uiProvider:'col',leaf:true}"+
         "]}"+
    "]";
    response.getWriter().write(json);
%>

index.jsp

<!-- 使用ColumnTree需要带入这两个文件 -->
<link rel="stylesheet" type="text/css" href="<%=rootpath%>/ext/ux/css/ColumnNodeUI.css"/>
<script type="text/javascript" src="<%=rootpath%>/ext/ux/ColumnNodeUI.js"></script>
<script type="text/javascript" defer>
    Ext.onReady(function(){
        Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';
        var tree = new Ext.tree.ColumnTree({
            //columnTree的宽度要等于columns列总和的宽度,否则会出现错行
            width: 451,
            height: 200,
            rootVisible:false,
            autoScroll:false,
            title: '示例',
            columns:[{
                header:'科目',
                width:230,
                dataIndex:'km'
            },{
                header:'课时',
                width:100,
                dataIndex:'ks'
            },{
                header:'讲师',
                width:100,
                dataIndex:'js'
            }],
            loader: new Ext.tree.TreeLoader({
                dataUrl:'list.jsp',
                uiProviders:{
                    'col': Ext.tree.ColumnNodeUI
                }
            }),
            root: new Ext.tree.AsyncTreeNode({
                //设置id,让后台知道应该在何时返回根节点的子点数据
                id : '0',
                text:'我是根'
            }),
            listeners: {
                afterrender: function(node) {
                   //展开树
                   tree.expandAll();
                }
            }
        });
        new Ext.Viewport({
            items : [tree]
        });
    });
</script>

 

转载：http://blog.csdn.net/itlwc/article/details/7873869