Extjs树的各种玩法案例

本案例中记载了Extjs中一棵树的形成以及各种案例集成,并详解介绍了TreePanel、TreeNode和AsyncTreeNode这三个主要对象。纯属个人业余时间玩玩的,整理出来,方便以后查看。

JSP页面:

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>区域管理</title>
	
	<link rel="stylesheet" type="text/css" href="${ctxStatic}/ext-3.4.0/resources/css/ext-all.css" />
	<link rel="stylesheet" type="text/css" href="${ctxStatic}/ext-3.4.0/ux/treegrid/treegrid.css" />

	<script type="text/javascript" src="${ctxStatic}/ext-3.4.0/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ext-all.js"></script>
	<script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ux/treegrid/TreeGridSorter.js"></script>
	<script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ux/treegrid/TreeGridColumnResizer.js"></script>
	<script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ux/treegrid/TreeGridNodeUI.js"></script>
	<script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ux/treegrid/TreeGridLoader.js"></script>
	<script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ux/treegrid/TreeGridColumns.js"></script>
	<script type="text/javascript" src="${ctxStatic}/ext-3.4.0/ux/treegrid/TreeGrid.js"></script>
	
	<script type="text/javascript" src="${ctxStatic}/jquery/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="${ctxStatic}/js/srcs/srcs-treegrid.js"></script>
	<script type="text/javascript">
		//项目根目录地址
		var ctxStatic = '${ctxStatic}';
	</script>
</head>
<body>
	<div id="container"></div>
</body>
</html>

js页面:

Ext.onReady(function() {
	// 初始化节点提示qtip
	Ext.QuickTips.init();
	// 定义一个根节点
	var root = new Ext.tree.TreeNode({
		id : 'root',
		text : '树根',
		checked : true,
		qtip : '我是树根'
	});
	// 定义一个树叶或者枝
	var leaf1 = new Ext.tree.TreeNode({
		id : "leaf1",
		text : '我是树叶1',
		checked : true,
		qtip : '我是树叶'
	});
	var leaf2 = new Ext.tree.TreeNode({
		id : "leaf2",
		text : '我是树枝2',
		checked : true,
		qtip : '我是树枝'
	});
	var leaf3 = new Ext.tree.TreeNode({
		id : "leaf3",
		text : '我是树叶3',
		href : 'http://www.baidu.com',
		checked : true,
		qtip : '我是树叶'
	});
	var leaf4 = new Ext.tree.TreeNode({
		id : "leaf4",
		text : '我是树枝4',
		checked : true,
		qtip : '我是树枝'
	});
	var leaf5 = new Ext.tree.TreeNode({
		id : "leaf5",
		text : '我是树叶5',
		checked : true,
		qtip : '我是树叶'
	});
	var leaf6 = new Ext.tree.TreeNode({
		id : "leaf6",
		text : '我是树叶4',
		checked : true,
		qtip : '我是树叶'
	});
	root.appendChild(leaf1);
	root.appendChild(leaf2);
	leaf2.appendChild(leaf3);
	leaf2.appendChild(leaf4);
	leaf4.appendChild(leaf5);
	leaf4.appendChild(leaf6);


	// 定义一个菜单
	// var contextMenu = new Ext.menu.Menu({ items : [(
	// ),( )] }); contextMenu.showAt(event.getXY());
	// tree.on('contextmenu',treeContextHandler);
	//	 
	//	
	// var root = new Ext.tree.AsyncTreeNode({ text:'i am a root', id:'root',
	// children:[{ text:'node1',leaf:true },{ text:'node2',leaf:true },{
	// text:'node3',leaf:true }] }); var loader = new Ext.tree.TreeLoader();


	// 定义一棵树
	var tree = new Ext.tree.TreePanel({
		renderTo : 'container',
		// loader : loader,
		root : root,
		title : '我是一颗小小树',// 树标题
		collapsible : true,// 树形是否有缩放功能
		autoHeight : true,// 自动高度,默认false
		animate : true,// 展开动画
		enableDrag : true,// 是否可以拖动(效果上)
		enableDD : true,// 不进可以拖动,还可以改变节点层次结构
		enableDrop : false,// 仅仅drop
		lines : true,// 节点间的虚线条是否显示
		rootVisible : true,// 是否显示根节点,默认true
		userArrows : true,// 是否显示小箭头
		// autoScroll : true,//是否显示滚动条
		// height : 150,
		width : 200


	});
	// 第一个参数为true,展开所有节点,false只展开一级。第二个参数为true,慢慢展开,显示展开,false,则不显示过程
	root.expand(false, true);
	// 编写树节点的单击事件
	tree.on('click', function(node, event) {
		// Ext.Msg.alert("信息提示","you clicked me!");
		Ext.Msg.show({
			title : '信息提示',
			msg : node.text,
			animEl : node.ui.textNode
		});
		// 为节点修改样式
		var ui = node.ui;
		ui.hide();
		(function() {
			ui.show();
		}).defer(2000);
		// ui.addClass("big");
		// (
		// function(){
		// ui.removeClass("big");
		// }
		// ).defer(5000);
		// 删除选中的节点
		// tree.getSelectionModel().getSelectedNode().remove();
	});
	// 编写树节点的双击事件
	tree.on('dblclick', function(node, event) {
		Ext.Msg.alert("信息提示", "you clicked me twice!");
	});
	// 编辑树节点的拖放事件
	tree.on('nodedrop', function(event) {
		Ext.Msg.alert('信息提示', '节点' + event.dropNode.text + '掉到了'
				+ event.target.text + '上,掉落的方式是' + event.point);
		switch (event.point) {
		case 'append':
			Ext.Msg.alert('信息提示', '节点' + event.dropNode.text + '变成了'
					+ event.target.text + '子节点');
			break;
		case 'above':
			Ext.Msg.alert('信息提示', '节点' + event.dropNode.text + '掉到了'
					+ event.target.text + '和'
					+ event.target.previousSibling.text + '之间');
			break;
		case 'below':
			Ext.Msg.alert('信息提示', '节点' + event.dropNode.text + '掉到了'
					+ event.dropNode.previousSibling.text + '和'
					+ event.target.nextSibling.text + '之间');
			break;
		}
	})


	// 对树节点进行排序的工具
	// new Ext.tree.TreeSorter(tree,{folderSort:true,dir:desc,property:'text'});


	// //编写树节点的双击事件 tree.on('expandnode',function(node,event){
	// Ext.Msg.alert("信息提示","expandnode!"); }); //编写树节点的双击事件
	// tree.on('collapsenode',function(node,event){
	// Ext.Msg.alert("信息提示","collapsenode!"); });


	var root2 = new Ext.tree.TreeNode({
		id : 'root2',
		text : '树根2',
		qtip : '我是树根2'
	});
	var tree2 = new Ext.tree.TreePanel({
		renderTo : 'container',
		root : root2,
		enableDrop : true,
		// enableDrag:true,
		title : '我是一颗小小草',
		collapsible : true,
		width : 200
	});
	root2.expand();


});

Extjs树的各种玩法案例_第1张图片

一、Ext.tree.TreePanel

      主要配置项:
            root:树的根节点。
            rootVisible:是否显示根节点,默认为true。
            useArrows:是否在树中使用Vista样式箭头,默认为false。
            lines:是否显示树线,默认为true。
            loader:树节点的加载器,默认为Ext.tree.TreeLoader。
            selModel:树的选择模式,默认为Ext.tree.DefaultSelectionModel。
            pathSeparator:树节点路径的分隔符,默认为“/”。
            singleExpand:是否一次只展开树中的一个节点,默认为true。
            requestMethod:请求方法,可选值有POST、GET。
            containerScroll:是否将树形面板注册到滚动管理器ScrollManager中。

      主要方法:
            collapseAll():收缩所有树节点
            expandAll():展开所有树节点
            getRootNode():获取根节点
            getNodeById(String id):获取指定id的节点
            expand( [Boolean deep], [Boolean anim], [Function callback], [Object scope] )展开panel的body以便让其变得可见
            expandPath( String path, [String attr], [Function callback] )展开当前TreePanel中的指定路径
            getChecked( [String attribute], [TreeNode startNode] )获得选中的节点列表,或者被选中节点的某个指定的属性数组
            selectPath( String path, [String attr], [Function callback] ) 从树中选中所给路径的节点
            getSelectionModel():返回此TreePanel使用的选择模型

 二、Ext.tree.TreeNode
      主要配置项:
            text:节点上的文本信息
            qtip:节点上的提示信息
            icon:节点图标对应的路径
            iconCls:应用到节点图标上的样式
            checked:当前节点的选择状态
                  true:在节点前显示一个选中状态的复选框
                  false:在节点前显示一个未选中状态的复选框
                  不指定该值:不显示任何复选框
            href:节点的连接属性,默认为#
            hrefTarget:显示节点连接的目标框架
            editable:是否允许编辑,默认为true
            expanded:是否展开节点,默认为false
            disabled:是否禁用节点,默认为false
            singleClickExpand:是否通过单击方式展开节点
            allowChildren:是否允许当前节点具有子节点,默认为true
            expandable:当不含子节点时,是否总显示一个加减图标,默认为false
            uiProvider:节点的UI类,默认为Ext.tree.TreeNodeUI
 
      主要属性:
            text:节点上的文本信息
            disabled:当前节点是否被禁用
  
      主要方法:
            collapse( [Boolean deep], [Boolean anim], [Function callback], [Object scope] ):收缩当前节点
            deep:是否级联收缩全部子节点
            collapseChildNodes( [Boolean deep] ):收缩所有子节点
            disable():禁用当前节点
            enable():启用当前节点
            ensureVisible( [Function callback], [Object scope] ):确保所有父节点都是展开的
            expand( [Boolean deep], [Boolean anim], [Function callback], [Object scope] ):展开当前节点
            expandChildNodes( [Boolean deep] ):展开所有子节点
            isExpanded():当前节点是否展开
            isSelected():当前节点是否被选中
            select():选择当前节点
            setText( String text ):设置当前的文本
            toggle():切换当前节点的展开和收缩状态
            unselect():取消对当前节点的选择
            getUI():取得节点的UI对象 

 三、Ext.tree.AsyncTreeNode
      主要配置项:
            loader:当前节点的树加载器,默认使用树中配置的树加载器
  
      主要方法:
            isLoaded():当前节点是否已经加载数据
            reload( Function callback, [Object scope] ):重新加载节点数据,并调用回调函数 


作者:伫望碧落 出处:http://blog.csdn.net/cl05300629

你可能感兴趣的:(tree,demo,ExtJs)