| 异步加载的树 |
| 2008-04-13 | |
|
主要介绍如何通过与服务端通信来实现异步加载树形菜单，适用于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> 运行代码，我们将得到如下效果：
 通过firebug（firefox的js调试插件，建议在配合ietab来一起进行js调试）的控制台，让我们来看看到底发生了什么，看下面两幅图：
 通过node的值在服务端动态生成json数据，这就是从服务端加载树形菜单的基本。点击事件请参照前一章。 |
|
| 最近更新 ( 2008-04-13 ) |
| < 上一篇 | 下一篇 > |
|---|