EXT 树

最新推荐文章于 2016-12-13 10:42:47 发布

转载最新推荐文章于 2016-12-13 10:42:47 发布 · 1.1k 阅读

文章标签：

#ext #tree #function #stylesheet #ajax #html

HTML 专栏收录该内容

28 篇文章

订阅专栏

本文通过实战演示如何使用EXTJS创建树形结构组件，并详细介绍了树节点的创建、配置及事件绑定过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目做完了没事就来学习学习EXT JS ，不过大部分代码是从网上copy 过来学习的

我最先学会的就是建树了，EXT JS 很强大，不过看的我头也大了，能建个树我就很高兴了，以后基础知识慢慢学习吧，最主要是能看见效果出来

先建个tree.jsp内容如下：

<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>My JSP 'tree.jsp' starting page</title>
    <!-- ext类库 -->
    <script type="text/javascript" src="js/ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="js/ext/ext-all-debug.js"></script>
    <!-- 本页的功能代码 -->
    <script type="text/javascript" src="tree.js"></script>
<link rel="stylesheet" type="text/css" href="js/ext/resources/css/ext-all.css">

</head>
<body>
                 <!-- 要有一定高度 EXT 2.0已经改了 不然看不见的 -->
<div id="tree" style="overflow:auto; height:100%;width:250px;border:5px solid #c3daf9;"></div> 
</body>
</html>

tree.js的内容如下：

Ext.onReady(function()
{
	/*
	var tree = new Ext.tree.TreePanel({
	       el:'tree',                  //绑定 页面上的<div id='tree'>因为树要在这里显示
	      useArrows:true,        //文件夹前显示的图标改变了不在是+号了
	      autoScroll:true,        //True to use overflow:'auto' on the panel's body element 
	       animate:true,       //开启动画效果
	       enableDD:true,       //实现拖拽
	                                   //是否显示跟节点 rootVisible:false,
	       containerScroll: true,
	//利用Ext.tree.TreeLoader和后台进行数据交换(ajax) ，这里用了一个记事本做的名字叫tree.txt
	      loader: new Ext.tree.TreeLoader({dataUrl: 'tree.txt'})
	});
	//TreeNode是不支持ajax的，我们需要把根节点换成   AsyncTreeNode(可以动态的加载数据)
	var root = new Ext.tree.AsyncTreeNode({text:'偶是根'});  
	tree.setRootNode(root);//将树的根节点放到树的面板中
	tree.render(); // 开始对树进行 渲染
	root.expand();//
	 */
	var Tree = Ext.tree;
	var root = new Tree.TreeNode(
	{
		id : '0',
		text : 'Root',
		draggable : false
	//不允许拖拽
			//icon:'im2.gif',//自定义节点图标
			});
	var node1 = new Tree.TreeNode(
	{
		id : '1',
		text : 'node1'
	});
	var node2 = new Tree.TreeNode(
	{
		id : '2',
		text : 'node2'
	});
	//搞个有超链接的叶子   // hrefTarget:'_blank'   新窗口打开链接
		var node11 = new Tree.TreeNode(
		{
			id : '11',
			href : 'test.jsp',
			text : '右键单击我',
			leaf : true
		});
		node1.appendChild(node11);//添加一个叶子
		var node21 = new Tree.TreeNode(
		{
			id : '21',
			text : '请左击我',
			leaf : true
		});
		var node22 = new Tree.TreeNode(
		{
			id : '22',
			text : 'node22',
			leaf : true
		});
		var node4 = new Tree.AsyncTreeNode(
		{
			id : '4',
			text : 'node4',
			leaf : false,
			loader : new Tree.TreeLoader(
			{
				dataUrl : 'tree.txt'
			})
		});
		node2.appendChild( [ node21, node22 ]);
		root.appendChild( [ node1, node2, node4 ]);
		var treePanel = new Tree.TreePanel(
		{
			el : 'tree',
			useArrows : true,
			autoScroll : true,
			animate : true,
			enableDD : true,
			//是否显示跟节点 rootVisible:false,
			containerScroll : true
		});
		treePanel.setRootNode(root);
		treePanel.render();
		root.expand();
		//增加点击事件
		node21.on('click', function(node)
		{
			alert('我是："' + node.text + '"，我的id是："' + node.id + '"');//这里增加你所需要的点击事件
			});
		//定义右键菜单
		var rightClick = new Ext.menu.Menu(
		{
			id : 'rightClickCont',
			items : [
			{
				id : 'rMenu1',
				text : '菜单1',
				//增加菜单点击事件
				handler : function()
				{
					alert('TMD点我干嘛！');
				}
			},
			{
				id : 'rMenu2',
				text : '菜单2',
				//增加链接
				href : 'xx.jsp'
			},
			{
				id : 'rMenu3',
				text : '菜单3'
			} ]
		});
		//增加右键点击事件
		node11.on('contextmenu', function(node, event)
		{//声明菜单类型
					event.preventDefault();
					rightClick.showAt(event.getXY());//取得鼠标点击坐标，展示菜单
			});
	});

下面是 tree.txt的内容：

[
    {text:'01',children:[
        {text:'01-01叶子',href:'test.jsp',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}
]

下面就是显示的结果：