ExtJs之结构树 Ext.tree.panel详细用法

最新推荐文章于 2023-03-20 16:52:51 发布

idomyway

最新推荐文章于 2023-03-20 16:52:51 发布

阅读量1.8w

点赞数 2

分类专栏： ExtJs 文章标签： extjs tree

ExtJs 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

1.简单的树

效果图

代码

[javascript] view plain copy

print ?

<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>

<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获得后台数据

[plain] view plain copy

print ?

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

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

list.txt

[plain] view plain copy

print ?

[{
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 }
]
}]

[{  
        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

[javascript] view plain copy

print ?

<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>

<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数据

[javascript] view plain copy

print ?

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

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

[javascript] view plain copy

print ?

<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>

<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提供后台数据

[plain] view plain copy

print ?

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

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

list.jsp

[javascript] view plain copy

print ?

<%@ 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);
%>

<%@ 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

[javascript] view plain copy

print ?

<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>

<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.树的事件

[javascript] view plain copy

print ?

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

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

[plain] view plain copy

print ?

[{
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 }
]
}]

[{  
        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

[javascript] view plain copy

print ?

<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>

<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

[plain] view plain copy

print ?

[{
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 }
]
}]

[{  
        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

[plain] view plain copy

print ?

[{
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 }
]
}]

[{  
        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

[javascript] view plain copy

print ?

<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>

<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.树的拖放

[plain] view plain copy

print ?

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

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

list.txt

[plain] view plain copy

print ?

[{
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 }
]
}]

[{  
        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

[javascript] view plain copy

print ?

<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>

<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 节点拖放的三种形式

[plain] view plain copy

print ?

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

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

9.2叶子不能append

[javascript] view plain copy

print ?

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

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

9.3 判断拖放的目标

[javascript] view plain copy

print ?

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

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

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

list.txt

[javascript] view plain copy

print ?

[{
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 }
]
}]

[{  
        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

[javascript] view plain copy

print ?

<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>

<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对树进行排序

[plain] view plain copy

print ?

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

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

代码

[javascript] view plain copy

print ?

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

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

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

[plain] view plain copy

print ?

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

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

[plain] view plain copy

print ?

[{
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 }
]
}]

[{  
        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

[javascript] view plain copy

print ?

<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>

<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>

[plain] view plain copy

print ?

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

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

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

[plain] view plain copy

print ?

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,用它来作为显示树形节点的视图

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

[javascript] view plain copy

print ?

<%@ 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);
%>

<%@ 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

[javascript] view plain copy

print ?

<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>

<!-- 使用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>

idomyway

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
ExtJs之结构树 Ext.tree.panel详细用法

1.简单的树效果图代码[javascript] view plain copyprint?"text/javascript" defer> Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = '/ext/resources/images/default/s.gif';
复制链接

扫一扫