<!--
这个导航树是在CSDN网友“meizz”提供的MzTreeView1.0基础上修改而来。
MzTreeView1.0 可以在 http://www.meizz.com/Web/Article/211/436.htm 获得。
//-->
这个导航树是在CSDN网友“meizz”提供的MzTreeView1.0基础上修改而来。
MzTreeView1.0 可以在 http://www.meizz.com/Web/Article/211/436.htm 获得。
//-->
调试欢乐多
这个是JS的东西
右键->查看源代码
http://rodney-gu.blog.sohu.com/
* 输出类似TreeView控件的树形目录
* @version 1.0
* @author Rodney
* @param string $s 最终要输出的字符串
* @param array $array 从数据库检索出来的数据数组
* @param int $parent_id 父ID
* @param string $space 递归显示的空格,默认为空
* @param int $mode 显示的功能模式:0--在子节点前面不显示任何东西;1--在子节点前面显示radiobutton;2--在子节点前面显示checkbox
* @param string $link_url 加在节点名称上的链接,如果为空,则不添加链接
* @param string $node_id 节点ID,默认为id
* @param string $node_parent_id 父节点ID,默认为parent_id
* @param strign $node_name 节点名称,默认为name
* @return string 返回字符串
*/
function make_tree(&$s, $array, $parent_id, $space = '', $mode = 0, $link_url = '', $node_id = 'id', $node_parent_id = 'parent_id', $node_name = 'name')
{
// 根据父节点来判断是否显示子节点
$parent_id == 0 ? $is_hidden = 'display:' : $is_hidden = 'display:none'; if($parent_id == 0)
{
$js_function = '
<script language="javascript"> function show_div(prefix, full_id)
{
// 把被点击的节点图片换掉
var d = document.all.tags("div");
var s = document.getElementById(full_id).innerHTML; var h = document.getElementById("img_" + prefix).src; // 替换小图片
h.indexOf("close") != -1 ? document.getElementById("img_" + prefix).src = h.replace("close", "open") : document.getElementById("img_" + prefix).src = h.replace("open", "close"); for(i = 0; i < d.length; i++)
{
tmp_r = d[i].id.split("_");
if(tmp_r[0] == prefix)
{
var e = document.getElementById(d[i].id).style;
if(e.display == "none")
{
e.display = "";
}
else
{
e.display = "none";
}
}
}
}
</script>
';
echo $js_function;
} for($i = 0; $i < count($array); $i++)
{
if($array[$i][$node_parent_id] == $parent_id)
{
// 如果链接不为空,则给节点名称加上链接
//$link_url != '' ? $node_name = '<a href="' . $link_url . '">' . $array[$i][$node_name] . '</a>' : $node_name = $array[$i][$node_name];
$link_url != '' ? $node_name = '<a href="nodes.php?p_id=' . $parent_id . '&nodes_name=' . urlencode($array[$i][$node_name]) . '&id=' . $array[$i][$node_id] . '" target="mainFrame" class="genmed" onclick="show_div(/'' . $array[$i][$node_id] . '/', /'' . $parent_id . '_' . $array[$i][$node_id] . '/')">' . $array[$i][$node_name] . '</a>' : $node_name = $array[$i][$node_name];
// 响应javascript的动作
$javascript_action = 'onclick="show_div(/'' . $array[$i][$node_id] . '/', /'' . $parent_id . '_' . $array[$i][$node_id] . '/')"'; // 根据$mode参数来显示具体的选项
switch($mode)
{
case 0:
$box = '';
break;
case 1:
$box = '<input type="radio" name="ids" value="' . $array[$i][$node_id] . '-' . $array[$i][$node_name] . '" onclick="make_action(' . $array[$i][$node_id] . ')">';
break;
case 2:
$box = '<input type="checkbox" name="' . $array[$i][$node_id] . '" value="' . $array[$i][$node_id] . '-' . $array[$i][$node_name] . '" onclick="make_action(' . $array[$i][$node_id] . ')">';
break;
}
$s .= '<div id="' . $parent_id . '_' . $array[$i][$node_id] . '" style="white-space:nowrap;cursor:hand;padding:3px;' . $is_hidden . '" >' . $space . '<img src="images/menu/close.gif" border="0" id="img_' . $array[$i][$node_id] . '" ' . $javascript_action . '>' . $box . ' ' . $node_name; // 递归调用make_tree函数
$this->make_tree($s, $array, $array[$i][$node_id], $space . ' ', $mode, $link_url, $node_id = 'id', $node_parent_id = 'parent_id', $node_name = 'name');
$s .= '</div>';
}
}
}// 调用该函数:$sql = 'select id, name, parent_id from nodes';// 从数据库中检索出数据,并保存在数组$array里,具体过程略。// 调用:$s = '';// 由于数据库中根节点的parent_id为0,所以在调用该函数的时候输入0,只输入这3个参数的时候输出最简洁的树形结构make_tree($s, $array, 0);echo $s;?>