EXT Tree 的简单使用方法

使用EXTJS搭建树形组件

最新推荐文章于 2021-10-25 11:31:33 发布

最新推荐文章于 2021-10-25 11:31:33 发布 · 159 阅读

文章标签：

#php #javascript #ViewUI

本文介绍如何利用EXTJS框架创建一个具有拖拽功能的树形组件，并详细展示了reorder.js文件中的代码实现，包括定义TreeLoader及TreePanel等关键步骤。

根据小道消息，公司要在原来产品基础上，引用AJAX框架 EXT，所以最近闲来没事的时候，小小研究了一下，特此拿来与大家分享，不多废话，看代码asd

reorder.js 文件的代码：

/*

 * Ext JS Library 1.0.1

 * Copyright(c) 2006-2007, Ext JS, LLC.

 * licensing@extjs.com

 * 

 * http://www.extjs.com/license

 */



Ext.onReady(function(){

    // shorthand

    var Tree = Ext.tree;

	

//关于TreeLoader的原始API定义，来自EXT DOC

//	Ext.tree.TreeLoader = function(config){

//		this.baseParams = {};

//		this.requestMethod = "POST";

//		Ext.apply(this, config);

//		

//		this.addEvents({

//			"beforeload" : true,

//			"load" : true,

//			"loadexception" : true

//		});

//	};

	

	//定义一个Loader，设置他的后台php页面为get-nodes.php

	var myTreeLoader = new Tree.TreeLoader({dataUrl: 'get-nodes.php'});

	//为Loader添加一个事件，目的是用于树与后台交互的时候传递我想要的参数	

	myTreeLoader.on("beforeload", function(treeLoader, node) {

	//这里我传递了两个参数，一个是该节点的ID，一个是该节点显示的文本

    	treeLoader.baseParams.node_id = node.id;

		treeLoader.baseParams.node_text = node.text;

    	//appParams.pzuserdm=node.attributes.text;

	});

    

	//这里实例化咱具体想要的那种类型的tree，EXT提供很多种不同的tree

	//咱刚开始学，搞个简单的玩玩先

    var tree = new Tree.TreePanel('tree-div', {

//下面是对咱的TreePanel属性的一些设置

//俺的英文也不怎么好，所以还是不出来献丑了，直接把DOC的内容COPY过来好了							  

//animate

//animate : Boolean

//true to enable animated expand/collapse

//This config option is defined by TreePanel.

        animate:true,

		

//containerScroll

//containerScroll : Boolean

//true to register this container with ScrollManager

//This config option is defined by TreePanel.

        loader:myTreeLoader,



//enableDD

//enableDD : Boolean

//true to enable drag and drop

//This config option is defined by TreePanel.

        enableDD:true,



//loader

//loader : Boolean

//A TreeLoader for use with this TreePanel

//This config option is defined by TreePanel.

 

        containerScroll: true

    });



//给树定义一个单击事件，其实本例中没什么用，俺这么写是为了调试方便，呵呵~~

	tree.on('click', function(node, event) {

		//alert(this.loader.dataUrl);

		//alert(node.text);

	});





//定义树的根节点

    var root = new Tree.AsyncTreeNode({

        text: '公司总部图',

        draggable:false,

        id:'-100'

    });

    tree.setRootNode(root);



    // render the tree

    tree.render();

    root.expand();

});

reorder.html 代码如下

<html>

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

	<title>Reorder TreePanel</title>

	<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

	<script type="text/javascript" src="../../adapter/yui/yui-utilities.js"></script>

	<script type="text/javascript" src="../../adapter/yui/ext-yui-adapter.js"></script>

	<script type="text/javascript" src="../../ext-all.js"></script>

	<script type="text/javascript" src="reorder.js"></script>

	</script>

	<link rel="stylesheet" type="text/css" href="../examples.css" />

</head>

<body>

<script type="text/javascript" src="../examples.js"></script>

<div id="tree-div" style="overflow:auto; height:300px;width:250px;border:1px solid #c3daf9;"></div>

</body>

</html>

get-nodes.php 代码就不写这里了。。。单开一篇写，彻底拜服于 FCK~~~