ExtJS有非常强大的树控件(tree),结合PHP,可以动态生成树结构:
1.先建立PHP文件:
<?php
if ($_POST['node']=="0")
{
$s="[{id:'1',text:'not leaf'},{id:'2',text:'is leaf',leaf:true}]";//这里可以从数据库中取数据,然后构建成JSON格式.
}else
{
$s='';
}
echo $s;
?>
2.建立HTML文件
<html>
<head>
<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>
<script type="text/javascript" src="./ext/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var tree=new Ext.tree.TreePanel({
el:'tree',
loader:new Ext.tree.TreeLoader({dataUrl:'hello.php'})
});
var root=new Ext.tree.AsyncTreeNode({id:'0',text:'树根'});
tree.setRootNode(root);
tree.render();
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
#tree {
position:absolute;
left:113px;
top:98px;
159px;
height:213px;
z-index:1;
}
-->
</style>
</head>
<body>
<div id="tree"></div>
</body>
</html>
在HTML文件中需要说明的是:
1.引入ExtJS的必要js文件和css文件.
2.在创建
var tree=new Ext.tree.TreePanel({
el:'tree',
loader:new Ext.tree.TreeLoader({dataUrl:'hello.php'})
});
时,要指定loader的后台服务程序.
3.在创建节点时,要使用
var root=new Ext.tree.AsyncTreeNode({id:'0',text:'树根'});
而非
var root=new Ext.tree.TreeNode({id:'0',text:'树根'});
传递的参数是以POST方式的node,值为id的值.
建立树和使用Ajax从后台取数据真是超级简单!