jquery treeview ajax

来源：互联网发布：tensorflow.org 编辑：程序博客网时间：2024/05/22 04:45

这个效果是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 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 onclick=/"click_me(this)/">{$v['name']}</span>"
      );
    }
    $tmp[] = $tmp_;
  }
}
echo json_encode($tmp);
?>

整体代码下载：　　http://blog.lrenwang.com/down/other/treeview.rar