jquery.treeview插件绑定数据库(php+oracle)

公司的OA系统有个人员组织选定的功能,用的是MzTreeView这个js库,后台的人员信息表也是根据MzTreeView来设计的,也就是任意一条记录有一个id来唯一标识这条记录和一个parentId来记录它的父节点。

enter image description here

最近在学习jquery,找到了很多实用的插件,比如今天要说的是jquery.treeview

打算将jquery.treeview插件绑定到数据库,从数据库中取数据,用的脚本是php,后台数据库将就系统本来的oracle。在功能上其实mztreeview比jquery.treeview要强大一些,效率还高点。唯一好点就是js压缩后只有6k,而mztreeview有20多k。总之没事干,just 4 fun。

表结构:

Name Type Nullable Default Comments
------------- ------------- -------- ------- --------
ID_ROLE NUMBER(10)
CHAR_ROLENAME NVARCHAR2(30)
INT_ROLETYPE NUMBER(10)
ID_UPLEVEL NUMBER(10)
CHAR_REMARK VARCHAR2(50) Y
B_DELETE NUMBER(2)
INT_ORDER NUMBER(10) Y
DEPT_CODE NVARCHAR2(30) Y 'se'

ID_ROLE是unique id,ID_UPLEVEL是parent id。jquery下载下来之后,解压放到web目录,然后把下面的脚本文件放入demo目录。php脚本如下:

<!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=gb2312"/>
<title>treeview test on hoa</title>

<link rel="stylesheet" href="../jquery.treeview.css" />
<link rel="stylesheet" href="../red-treeview.css" />
<link rel="stylesheet" href="screen.css" />

<script src="../lib/jquery.js" type="text/javascript"></script>
<script src="../lib/jquery.cookie.js" type="text/javascript"></script>
<script src="../jquery.treeview.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
$("#browser").treeview({ //调用jquery.tree的代码
collapsed:true, //默认把组织树收缩起来
});
});
</script>
</head>
<body>

<h1 id="banner"> Demo</h1>
<div id="main">
<ul id="browser" class="treeview-red">
< ?php

function read($uplevel){ //递归函数,用来遍历树
$conn = oci_connect('ora_user', 'ora_pass', 'orcl');
if(!$conn)
{
print ("conn error");
}
$query = "SELECT * FROM sa_role where id_uplevel=".$uplevel." and b_delete='0' order by id_role";
//echo $query;
$stid = oci_parse($conn, $query);

$r = oci_execute($stid, OCI_DEFAULT);
while ($row = oci_fetch_array($stid, OCI_RETURN_NULLS))
{
if($row[2]==2) //$row[2]是INT_ROLETYPE,2是下面有子节点,1是叶子(就是没有子节点的节点)
{
print "<li> <span class=\"folder\">";
print $row[1]."</span> \n"; //$row[1]是节点内容,这个字段是CHAR_ROLENAME
print "\n\t</ul><ul>";
$uplevel=$row[0];
read($uplevel); //再调用自己继续读节点
}
if($row[2]==1) //如果是叶子
{

print "<li> <span class=\"file\">";
print $row[1]."</span> ";
print "</li>";
}
}
print "</ul>";
oci_close($conn);
}
read(-1);//假设根节点id为-1
print "";
?>

</div>

</body></html>

其中修改

<ul id="browser" class="treeview-red">

中class的值为treeview-red,treeview-default,treeview-black,treeview-gray,treeview-famfamfam,这些是jquery.treeview自带的样式。

可以在

$("#browser").treeview({ 
});

中,可以加入参数自定义,具体参数用法参照:http://docs.jquery.com/Plugins/Treeview/treeview#options
参数解释:
animated: "fast" 树的展开速度为快
collapsed: true 收缩树的所有节点
unique: true 保持每次展开1个节点,关闭之前打开的兄弟节点
persist: "location" 把进入的节点位置通过url保存

branches = $("<li class='closed'><span class='folder'>New Sublist</span><ul><li><span class='file'>Item1</span></li><li><span class='file'>Item2</span></li></ul></li>").prependTo("#folder21");
$("#browser").treeview({
add: branches
});

插入新节点

persist: "cookie" 把进入的节点位置通过cookie保存,需要jquery插件jquery.cookie.js
cookieId: "treeview-black" 设置cookie名
control: "#treecontrol" 把树的控制交给id为treecontrol

toggle: function() {  
window.console && console.log("%o was toggled", this);
}

设定一个交替函数

最后效果:

enter image description here

这里只做到了树的查看,还有有些问题需要解决,比如节点插入,删除,编辑与数据库的交互,貌似需要用到牛逼的ajax。

标签: PHP, jQuery, Oracle

添加新评论