来自http://tunps.com/jquery-treeview-plugin-bind-on-database-php-with-oracle
公司的HOA系统有个人员组织选定的功能，用的是MzTreeView这个js库，后台的人员信息表也是根据MzTreeView来设计的，也就是任意一条记录有一个id来唯一标识这条记录和一个parentId来记录它的父节点。
最近在学习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"> < ?phpfunction 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为-1print "";?> </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);
}
设定一个交替函数
———
最后效果：
这里只做到了树的查看，还有有些问题需要解决，比如节点插入，删除，编辑与数据库的交互，貌似需要用到牛逼的ajax。
