首页 > 代码库 > jquery treeview
jquery treeview
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=http://www.mamicode.com/"jquery.treeview.css" rel="stylesheet" type="text/css" /> <script src=http://www.mamicode.com/"http://www.cnblogs.com/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> <script src=http://www.mamicode.com/"jquery.cookie.js" type="text/javascript"></script> <script src=http://www.mamicode.com/"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=http://www.mamicode.com/"?/index.cfm\"><strong>hello</strong></a></li>‘);//这儿可以替换异步取数据函数 e.preventDefault();//阻止事件冒泡 } }); }) </script></head>
Body结构
<ul id="navigation"> <li><img src=http://www.mamicode.com/"js/images/folder.gif" /><a href=http://www.mamicode.com/"?1">Item 1</a> <ul> <li><img src=http://www.mamicode.com/"js/images/file.gif" /><a href=http://www.mamicode.com/"?1.0">Item 1.0</a> <ul> <li><a href=http://www.mamicode.com/"?1.0.0">Item 1.0.0</a></li> </ul> </li> <li><a href=http://www.mamicode.com/"?1.1">Item 1.1</a></li> <li><a href=http://www.mamicode.com/"?1.2">Item 1.2</a> <ul> <li><a href=http://www.mamicode.com/"?1.2.0">Item 1.2.0</a> <ul> <li><a href=http://www.mamicode.com/"?1.2.0.0">Item 1.2.0.0</a></li> <li><a href=http://www.mamicode.com/"?1.2.0.1">Item 1.2.0.1</a></li> <li><a href=http://www.mamicode.com/"?1.2.0.2">Item 1.2.0.2</a></li> </ul> </li> <li><a href=http://www.mamicode.com/"?1.2.1">Item 1.2.1</a> <ul> <li><a href=http://www.mamicode.com/"?1.2.1.0">Item 1.2.1.0</a></li> </ul> </li> <li><a href=http://www.mamicode.com/"?1.2.2">Item 1.2.2</a> <ul> <li><a href=http://www.mamicode.com/"?1.2.2.0">Item 1.2.2.0</a></li> <li><a href=http://www.mamicode.com/"?1.2.2.1">Item 1.2.2.1</a></li> <li><a href=http://www.mamicode.com/"?1.2.2.2">Item 1.2.2.2</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href=http://www.mamicode.com/"?2">Item 2</a> <ul> <li><span>Item 2.0</span> <ul> <li><a href=http://www.mamicode.com/"?2.0.0">Item 2.0.0</a> <ul> <li><a href=http://www.mamicode.com/"?2.0.0.0">Item 2.0.0.0</a></li> <li><a href=http://www.mamicode.com/"?2.0.0.1">Item 2.0.0.1</a></li> </ul> </li> </ul> </li> <li><a href=http://www.mamicode.com/"?2.1">Item 2.1</a> <ul> <li><a href=http://www.mamicode.com/"?2.1.0">Item 2.1.0</a> <ul> <li><a href=http://www.mamicode.com/"?2.1.0.0">Item 2.1.0.0</a></li> </ul> </li> <li><a href=http://www.mamicode.com/"?2.1.1">Item 2.1.1</a> <ul> <li><a href=http://www.mamicode.com/"?2.1.1.0abc">Item 2.1.1.0</a></li> <li><a href=http://www.mamicode.com/"?2.1.1.1">Item 2.1.1.1</a></li> <li><a href=http://www.mamicode.com/"?2.1.1.2">Item 2.1.1.2</a></li> </ul> </li> <li><a href=http://www.mamicode.com/"?2.1.2">Item 2.1.2</a> <ul> <li><a href=http://www.mamicode.com/"?2.1.2.0">Item 2.1.2.0</a></li> <li><a href=http://www.mamicode.com/"?2.1.2.1">Item 2.1.2.1</a></li> <li><a href=http://www.mamicode.com/"?2.1.2.2">Item 2.1.2.2</a></li> </ul> </li> </ul> </li> </ul> </li> <li><a href=http://www.mamicode.com/"?3">Item 3</a> <ul> <li class="open"><a href=http://www.mamicode.com/"?3.0">Item 3.0</a> <ul> <li><a href=http://www.mamicode.com/"?3.0.0">Item 3.0.0</a></li> <li><a href=http://www.mamicode.com/"?3.0.1">Item 3.0.1</a> <ul> <li><a href=http://www.mamicode.com/"?3.0.1.0">Item 3.0.1.0</a></li> <li><a href=http://www.mamicode.com/"?3.0.1.1">Item 3.0.1.1</a></li> </ul> </li> <li><a href=http://www.mamicode.com/"?3.0.2">Item 3.0.2</a> <ul> <li><a href=http://www.mamicode.com/"?3.0.2.0">Item 3.0.2.0</a></li> <li><a href=http://www.mamicode.com/"?3.0.2.1">Item 3.0.2.1</a></li> <li><a href=http://www.mamicode.com/"?3.0.2.2">Item 3.0.2.2</a></li> </ul> </li> </ul> </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=http://www.mamicode.com/"?/index.cfm\"><strong>Home</strong></a>"; if (lists.Count > 0) { str += "<ul>"; foreach (Xtgl_Zzjg c in lists) { str += "<li><a href=http://www.mamicode.com/"?/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=http://www.mamicode.com/"?/index.cfm\"><strong>" + p.Yhxx_Nname + "</strong></a></li>"; } str += "</ul>"; } str += "</li>"; } str += "</ul>"; } str += "</li></ul>"; Response.Write(str); %>jquery treeview
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。