这个效果是jquery的插件 jquery.treeview 带有ajax功能, 效果非常棒, 和大家共享下, 先上图
还有好多样式,等以后我会慢慢整理出来,持续更新中 呵呵
官方网站 http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
html代码调用超级方便, 只要加载相关js,css 一个语句就行了
test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tree view</title>
<link href="jquery.treeview.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="screen.css" />
<style>
.hand{ cursor:pointer}
</style>
<script language="JavaScript" type="text/javascript" src="lib/jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="lib/jquery.cookie.js"></script>
<script language="JavaScript" type="text/javascript" src="lib/jquery.treeview.min.js"></script>
<script language="JavaScript" type="text/javascript" src="lib/jquery.treeview.async.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#treeview").treeview({
url: "trees.php"
})
//也可以传参 url: "trees.php?tt=123"
});
</script>
</head>
<body>
<!--调试数据的时候注意有缓存现象,清空浏览器在测试-->
<!--注意,一定要放在ul标签里面,否则出现变形-->
<ul id="treeview"></ul>
<script>
function click_me(obj)
{
alert(obj.innerText)
}
</script>
</body>
</html>
php部分 主要目的就是根据传入的ID查找下级节点, 主要返回3个属性 主键ID 显示的TEXT 是否有下级节点hasChildren
trees.php代码
<?php
/**
* 作者:王公威
* 博客:blog.lrenwang.com
*/
/**
* 调试数据的时候注意有缓存现象,清空浏览器在测试
*/
/**
* 查找是否有节点
*
* @param array $arr
* @param string $id
* @return bool
*/
function check_node($arr,$id)
{
foreach ($arr as $v)
{
if (preg_match("~^{$id}[0-9]{2}~",$v['id']))
{
return true;
}
}
false;
}
/**
* 构造的数组
*/
$array = array(
array(id=>"01",name=>"家具"),
array(id=>"02",name=>"电器"),
array(id=>"03",name=>"服装"),
array(id=>"0101",name=>"被罩"),
array(id=>"0102",name=>"枕头"),
array(id=>"0102",name=>"橱柜"),
array(id=>"0301",name=>"衣服"),
array(id=>"0302",name=>"裤子"),
array(id=>"0303",name=>"帽子"),
);
if ($_REQUEST['root'] == "source")
{
//第一次传值是 source
$id='';
}
else
{
$id = $_REQUEST['root'];
}
$tmp = array();
foreach ($array as $v)
{
if (preg_match("~^{$id}[0-9]{2}$~",$v['id']))
{
$node = check_node($array,$v['id']);
if ($node)
{
$tmp_ = array(
"id"=>$v['id'],
"text"=>"<span class=hand>{$v['name']}</span>",
"classes"=>'important',
"hasChildren"=>true
);
}
else
{
$tmp_ = array(
"id"=>$v['id'],
"text"=>"<span class=hand οnclick=/"click_me(this)/">{$v['name']}</span>"
);
}
$tmp[] = $tmp_;
}
}
echo json_encode($tmp);
?>
整体代码下载: http://blog.lrenwang.com/down/other/treeview.rar