jquery treeview 插件参数说明
treeview开源地址:https://github.com/jzaefferer/jquery-treeview
1、animated:String or Number
设置展开子节点时的显示速度,有 slow、normal、fast 或者指定速度值,与 jQuery 的 hide(show)中的 speed 参数相似。
这里有个问题,如果使用动态的效果,这时候给人一闪一闪的感觉,如果不喜欢可以不使用这个属性就可以,这样就没有那种一闪一闪的感觉了
2、persist:String
记忆折叠的方式。location:页面刷新不保留折叠状态;cookie:页面刷新保留折叠状态。
3、collapsed:boolean Default: false, all expanded
初始化时的折叠状态。true,初始化为收缩节点状态;false,为全部节点展开。
4、unique:boolean Default: false
展开同级节点的唯一性。true,当展开一个节点时,同级的其他节点会自动关闭;false,当展开一个节点时,同级的其他节点保持原形。
5、control:Selector
指定一个容器,控制整个tree的展开,收缩 或者收放 所有的节点。
example
$(".selector").treeview({control: "#container" })
6.toggle:Callback
当一个节点的收放状态改变时,调用自定义函数Callback。
example
$(".selector").treeview({toggle: function() {console.log(this + " has been toggle");} })
7.add:Selector
向已有的树中追加节点,selector 为需要追加的节点集合,该集合中的节点须与已有树的节点结构保持一致。
example
var tree = $(".selector").treeview(); $(".button").click(function() {var newSublist = $("<li><span class='folder'>New Sublist</span><ul>" +"<li><span class='file'>Item1</span></li>" +"<li><span class='file'>Item2</span></li></ul></li>").appendTo(tree);tree.treeview({add: newSublist}); });
8.cookieId:String
设置 persist: cookie 后 用此参数设置cookie 的名称。
9.url:String
异步加载时,设置url 地址。
下面就来看看如何的实用
官方参考网站包涵Demo下载:http://bassistance.de/jquery-plugins/
html页引用和JS部分
<head runat="server">
<%-- 文件引用部分,该部分都可从官方参考Demo中获得,其中cookie为上述参数“persist”服务来记录刷新前展示信息--%><link href="jquery.treeview.css" rel="stylesheet" type="text/css" /><script src="http://www.cnblogs.com/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script><script src="jquery.cookie.js" type="text/javascript"></script><script src="jquery.treeview.js" type="text/javascript"></script><title></title> <script type="text/javascript">$(function () {$("#tree1").treeview({collapsed: true,control: "#sidetreecontrol",persist: "cookie",unique: true,toggle: function (e) {$('ul', this).html('<li><a href=\"?/index.cfm\"><strong>hello</strong></a></li>');//这儿可以替换异步取数据函数e.preventDefault();//阻止事件冒泡}});}) </script> </head>
Body结构
<ul id="tree1"><li>主节点内容<ul><li>主节点的子节点1</li><li>主节点的子节点2<ul><li>主节点的子节点2的子节点</li><li>主节点的子节点2的子节点</li><li>主节点的子节点2的子节点</li><li>主节点的子节点2的子节点</li></ul></li><li>主节点的子节点3</li><li>主节点的子节点4</li></ul> </li> </ul>
加载节点时如果数据量很大,可先加载主节点,子节点通过参数toggle来异步加载
由treeview树的规律,我们可以从数据库中来加载所需要的树
<%DALZzjg dal = new DALZzjg();DALYhxx ydal = new DALYhxx();List<Xtgl_Zzjg> lists = new List<Xtgl_Zzjg>();lists = dal.FindWhere(" zzjg_npcode='10' ");string str = "<ul id=\"tree1\">";str += "<li><a href=\"?/index.cfm\"><strong>Home</strong></a>";if (lists.Count > 0){str += "<ul>";foreach (Xtgl_Zzjg c in lists){str += "<li><a href=\"?/index.cfm\"><strong>" + c.Zzjg_Nmc + "</strong><span style=\"display:none;\">" + c.Zzjg_Ncode + "</span></a>";DALUserAndDep yydal = new DALUserAndDep();List<View_UserandDep> listschild = new List<View_UserandDep>();listschild = yydal.FindWhere(" zzjg_ncode='" + c.Zzjg_Ncode + "' order by px ");if (listschild.Count > 0){str += "<ul>";foreach (View_UserandDep p in listschild){// str += "<li><a href=\"?/index.cfm\"><strong>" + p.Yhxx_Nname + "</strong></a></li>"; }str += "</ul>";}str += "</li>";}str += "</ul>";}str += "</li></ul>";Response.Write(str);%>