Ext教程连载 - 异步加载的树

最新推荐文章于 2024-10-04 13:18:14 发布

weixin_30609287

最新推荐文章于 2024-10-04 13:18:14 发布

阅读量62

点赞数

文章标签： json php javascript ViewUI

原文链接：http://www.cnblogs.com/dxs376263348/archive/2009/09/29/1576110.html

版权

主要介绍如何通过与服务端通信来实现异步加载树形菜单，适用于cms的分类管理等。 ext支持从服务器动态加载树形菜单，这里要说明下，ext所识别的回调函数返回的数据类型都必须是json格式的，不明白什么是json的朋友请自行 google。这里我们需要将php的数组转换成json格式，，php5.2.5以上已经自带此功能，为了更好的兼容不同版本的php，建议使用 pear的json类来转换。相关下载地址为：http://pear.php.net/pepr/pepr-proposal-show.php?id=198，先看下服务端 treedata.php的代码：

代码:

<?php
/*
leaf为false表示非叶子节点，为true表示是叶子节点
*/
$trees['root'][] = array('id'=>'1','text'=>'我是子节点1','leaf'=>false);
$trees['1'][] = array('id'=>'2','text'=>'我是孙子节点1','leaf'=>true);
$trees['root'][] = array('id'=>'4','text'=>'我是子节点2','leaf'=>false);
$trees['4'][] = array('id'=>'5','text'=>'我是孙子节点2','leaf'=>true);

require('Json.php');//包含json类
$result = $trees[$_REQUEST['node']];//此处的node为ext传的值，根据该值达到动态加载的效果
$json = new Services_JSON();
echo $json->encode($result);//格式化数组成json格式
?>

接下来看下客户端js的代码：

代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
</head>

<body>
<script>
Ext.onReady(function(){
var Tree = Ext.tree;
//声明树定义
var tree = new Tree.TreePanel({
el:'tree-div',//填充到的区域
autoScroll:true,//自动滚动
animate:true,//动画效果
enableDD:true,//允许拖拽节点
border:false,//没有边框
rootVisible:true,//设为false，隐藏根节点
containerScroll: true,
//定义json来源文件url
loader: new Tree.TreeLoader({
dataUrl:'treedata.php'
})
});

//定义根节点
var root = new Tree.AsyncTreeNode({
text: '我是根',
draggable:false,//不允许拖拽
id:'root'
});
tree.setRootNode(root);

//生成树
tree.render();
root.expand();
});
</script>
<div id="tree-div"></div>
</body>
</html>