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="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="navigation">
<li><img src="js/images/folder.gif" /><a href="?1">Item </a>
<ul>
<li><img src="js/images/file.gif" /><a href="?1.0">Item 1.0</a>
<ul>
<li><a href="?1.0.0">Item 1.0.</a></li>
</ul>
</li>
<li><a href="?1.1">Item 1.1</a></li>
<li><a href="?1.2">Item 1.2</a>
<ul>
<li><a href="?1.2.0">Item 1.2.</a>
<ul>
<li><a href="?1.2.0.0">Item 1.2.0.0</a></li>
<li><a href="?1.2.0.1">Item 1.2.0.1</a></li>
<li><a href="?1.2.0.2">Item 1.2.0.2</a></li>
</ul>
</li>
<li><a href="?1.2.1">Item 1.2.</a>
<ul>
<li><a href="?1.2.1.0">Item 1.2.1.0</a></li>
</ul>
</li>
<li><a href="?1.2.2">Item 1.2.</a>
<ul>
<li><a href="?1.2.2.0">Item 1.2.2.0</a></li>
<li><a href="?1.2.2.1">Item 1.2.2.1</a></li>
<li><a href="?1.2.2.2">Item 1.2.2.2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="?2">Item </a>
<ul>
<li><span>Item 2.0</span>
<ul>
<li><a href="?2.0.0">Item 2.0.</a>
<ul>
<li><a href="?2.0.0.0">Item 2.0.0.0</a></li>
<li><a href="?2.0.0.1">Item 2.0.0.1</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="?2.1">Item 2.1</a>
<ul>
<li><a href="?2.1.0">Item 2.1.</a>
<ul>
<li><a href="?2.1.0.0">Item 2.1.0.0</a></li>
</ul>
</li>
<li><a href="?2.1.1">Item 2.1.</a>
<ul>
<li><a href="?2.1.1.0abc">Item 2.1.1.0</a></li>
<li><a href="?2.1.1.1">Item 2.1.1.1</a></li>
<li><a href="?2.1.1.2">Item 2.1.1.2</a></li>
</ul>
</li>
<li><a href="?2.1.2">Item 2.1.</a>
<ul>
<li><a href="?2.1.2.0">Item 2.1.2.0</a></li>
<li><a href="?2.1.2.1">Item 2.1.2.1</a></li>
<li><a href="?2.1.2.2">Item 2.1.2.2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="?3">Item </a>
<ul>
<li class="open"><a href="?3.0">Item 3.0</a>
<ul>
<li><a href="?3.0.0">Item 3.0.</a></li>
<li><a href="?3.0.1">Item 3.0.</a>
<ul>
<li><a href="?3.0.1.0">Item 3.0.1.0</a></li>
<li><a href="?3.0.1.1">Item 3.0.1.1</a></li>
</ul>
</li>
<li><a href="?3.0.2">Item 3.0.</a>
<ul>
<li><a href="?3.0.2.0">Item 3.0.2.0</a></li>
<li><a href="?3.0.2.1">Item 3.0.2.1</a></li>
<li><a href="?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=\"?/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);
%>
jquery treeview的更多相关文章
- 基于Bootstrap的JQuery TreeView树形控件，数据支持json字符串、list集合（MVC5）<二>
上篇博客给大家介绍了基于Bootstrap的JQuery TreeView树形控件,数据支持json字符串.list集合(MVC5)<一>, 其中的两种方式都显得有些冗余.接着上篇博客继续 ...
- jQuery树形菜单(1)jquery.treeview
jQuery的树形插件资料URL:http://bassistance.de/jquery-plugins/jquery-plugin-treeview/从该网站Download得到jquery.tr ...
- 修复jquery.treeview的增加子节点的方法的bug
1.修复理由 在一个android项目中用到了treeview控件(本来自己通过android的原生api实现了一个http://www.cnblogs.com/Mr-Nobody/p/3527688 ...
- 自己开发开源jquery插件--给jquery.treeview加上checkbox
很多时候需要把树状的数据显示除来,比如分类,中国省份.城市信息,等,因此这方面的javascript插件也有很多.比如性能优异的jquery.treeview和国人开发的功能强大的zTree. 我最近 ...
- jQuery treeview的简单用法
最近的项目要用到treeview插件,刚好就自己整理一下这方面的资料. 1.文档树示例 最简单的一个例子就是文档树的实现.效果如下图所示. 在使用treeview之前,html文档中需要包含几个jqu ...
- jQuery.TreeView插件实现树状导航（十三）
一:jQuery.TreeView插件简介 该插件的特点: 1.支持静态的树,即一次性将全部数据加载到客户端. 2.支持异步树,即一次只加载一级或若干级节点,子节点可以异步加载数据. 3.支持节点级联 ...
- Jquery.Treeview+Jquery UI制作Web文件预览
效果图: 前台Html: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="D ...
- jquery Treeview插件的使用及复选框的级联
本文是对jquery的Treeview插件使用的实例介绍 效果图如下: 文件结构如下:
- jQuery插件treeview点击节点名称不展开、收缩节点 分类： JavaScript 2014-06-16 20:28 539人阅读 评论(0) 收藏
修改jquery.treeview.js文件中的applyClasses方法(注释掉两行代码): 修改后的applyClasses方法如下: applyClasses: function(settin ...
随机推荐
- 网狐6603手机棋牌游戏源码.rar
网狐6603手机棋牌游戏源码.rar 文件大小: 333 MB 发布一款手机棋牌游戏源码带教程文档! 仅供学习,下载后请务必在24小时内删除! 网狐6603手机棋牌游戏源码 链接:http://p ...
- 使用“原生”HTML DOM获取input的输入值并显示
理论基础 HTML <input> value属性.value规定<input>元素的值.value对于不同input类型,用法也不同. 1.对于"button&qu ...
- SignalR简单示例教程入门版
上周五最后一天在公司上班,无聊之余就想做点什么.介于之前有人让我做个简易版的在线聊天的,于是乎就打算花一天时间来弄下关于SignalR的简单教程制作一个在线的聊天的. 1:前端用了国产的一个MVVM框 ...
- mssql server提示无权限
mssqlserver在查询系统视图时(如:select * from sys.syscacheobjects),有时会报出如下提示: 消息 300,级别 14,状态 1,第 1 行VIEW SERV ...
- 才知道百度也提供了智能DNS服务 - 加速乐
http://jiasule.baidu.com/ 智能DNS 依托百度多年积累的高精度DNS识别库,平均只需5秒全球DNS服务器全部生效,百度蜘蛛1秒生效.抗攻击.无限解析记录,免费支持电信.联通. ...
- mysql学习笔记 第七天
数据库的备份与还原 数据库的备份与还原是后面章节的内容,但是在学习的时候已经需要数据的备份与还原了,所以就了解了一下.数据库有很多种备份方法,我学习的是其中的一种 备份: 对于数据库的备份: C:&g ...
- yii2.0用户登录，退出判断（摘录）
文章来源:http://blog.sina.com.cn/s/blog_88a65c1b0101ix13.html 判断用户是否登录 在 Yii2.0 里面,判断用户是否已经登录,我们用下面的代码即可 ...
- PHP异常与错误处理机制
先区别一下php中错误 与 异常的概念吧 PHP错误:是属于php程序自身的问题,一般是由非法的语法,环境问题导致的,使得编译器无法通过检查,甚至无法运行的情况.平时遇到的warming.notice ...
- 阿里云主机上安装jdk
今天继续安装jdk到阿里云服务上,大家要看一下阿里云是32位还是64位的,如果是32位下载32位的包,如果是64位的下载64位的包 我的就是64位的,开始我还不知道是怎么区分32/64位的,原来X64 ...
- html，xhtml和xml
html,xhtml和xml的定义: 1.html即是超文本标记语言(Hyper Text Markup Language),是最早写网页的语言,但是由于时间早,规范不是很好,大小写混写且编码不规范: ...