jquery.treeview.js树控件的应用
插件的官方网站: http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
官方提供的插件实例:http://jquery.bassistance.de/treeview/treeviewDemo.html
一、静态树的写法
<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(){
$("#navigation").treeview({
persist: "location",
collapsed: true,
unique: true
});
});
</script>
<ul id="navigation">
<li><a href="?1">Item 1</a>
<ul>
<li><a href="?1.0">Item 1.0</a>
<ul>
<li><a href="?1.0.0">Item 1.0.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.0</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.1</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.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 2</a>
<ul>
<li><span>Item 2.0</span>
<ul>
<li><a href="?2.0.0">Item 2.0.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.0</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.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.2</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 3</a>
<ul>
<li class="open"><a href="?3.0">Item 3.0</a>
<ul>
<li><a href="?3.0.0">Item 3.0.0</a></li>
<li><a href="?3.0.1">Item 3.0.1</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.2</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>
二、动态树的生成
要想动态生成jQuery的树是很简单的,你只需要通过ajax异步调用后台的方法,然后返回拼好的html字符串到前台页面就ok了
对于节点单击要触发什么事件,可以通过jQuery的其他方法实现
转载于:https://www.cnblogs.com/linzheng/archive/2010/10/30/1865088.html
jquery.treeview.js树控件的应用相关推荐
- 漂亮的JS树控件,自带8个皮肤(dhtmlxTree)
dhtmlxTree(DHTML的扩展树)是一个功能丰富的JavaScript树形菜单 ,允许你轻松地创建有吸引力,快速装载能力下降层次树与跨浏览器兼容性,Ajax支持,在线节点编辑,和拖放的N -. ...
- 查找前端依赖 jquery css js 时间控件 不要用远程依赖 会变化的 card
BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务 找到你要的版本
- JS组件系列——Bootstrap 树控件使用经验分享 - 懒得安分 - 博客园
前言:很多时候我们在项目中需要用到树,有些树仅仅是展示层级关系,有些树是为了展示和编辑层级关系,还有些树是为了选中项然后其他地方调用选中项.不管怎么样,树控件都是很多项目里面不可或缺的组件之一.今天, ...
- activex控件 新对象 ocx 初始化_Office已经支持64位的树控件Treeview了
之前在使用Office365时发现微软其实已经悄悄地开始提供了64位的Treeview树控件,只是并没有公开宣布.当时是在一个网友的电脑上说他可以在64位Excel中可直接使用64位树控件,当时以为他 ...
- QML树控件TreeView的使用(上)
在Qt5.5之前是没有树控件的,我们在使用时用的是ListView来构造出一个树,Qt5.5之后的QML开发阶段,有了树控件TreeView,本篇着重记录QML的TreeView的使用.根据MVC分解 ...
- 【VBA】树控件TreeView的学习(二)
哈喽,手机边亲爱的你还好吗?我是默默给大家分享Access知识的will. 上一篇文章我们简单讲了一下TreeView怎么 加载显示数据,TreeView上显示的数据都是手工添加的,那今天我们要来讲一 ...
- 【VBA树控件学习四】编辑与删除TreeView节点
遇见春天 HI,我是默默等你来点赞的edon,大家最近忙吗? 今天,我们接着来讲一下TreeView树控件.之前,我们已经把新增节点的功能讲完了,接下来我们来讲一下编辑功能与删除功能. 这里我们只修改 ...
- 【VBA】树控件TreeView的学习(一)
哈喽,手机边亲爱的你还好吗?我是默默给大家分享Access知识的will. 大家2022年快乐,从今天开始我们来讲一下树控件. 树控件在我们的开发中是经常用的到的控件也是一个重点,我会从最简单的讲起, ...
- jQuery:收集一些基于jQuery框架开发的控件/jquery插件2
Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. 主页:http://letmehaveblog.blogspot.com/2007/10/ ...
最新文章
- R语言构建仿真数据库(sqlite)并使用dplyr语法和SQL语法查询数据库、将dplyr语法查询语句翻译为SQL查询语句
- mysql left join 慢 的一个原因
- 【Linux 内核】CFS 调度器 ④ ( 调度子系统组件模块 | 主调度器、周期性调度器 | 调度器类 )
- Ansible自动化运维基础-------ad-hoc
- php写新闻浏览历史,PHP实现浏览历史记录
- 获取日志$6到$NF的字段
- INPUT[type=file]的change事件不触发问题
- linux数据包注释,关于 linux中TCP数据包(SKB)序列号的小笔记
- springboot springmvc mybatis_12道重点的Spring Boot面试题,帮你整理好了!
- 自动化审批决策树助你面试更上一层楼
- NYOJ--6--喷水装置(一)
- Windows Terminal 使用 pem 文件连接服务器
- 基于NanoPi3(三星S5P6818)的u-boot移植(一)
- 基于百度翻译api的命令行翻译助手
- 小白常用的Widows10实用功能,让你更好掌控你的电脑。
- Oracle之排序会影响rownum混乱的问题
- js调用本地摄像头demo
- vs code远程编辑文件
- eNSP实验五:RIP路由协议
- 【JavaWeb-遇错】继承或者实现Servlet相关时总是报红或者包导不进来
热门文章
- python爬虫案例讲解-Python爬虫案例集合
- python精通-11周精通python计划(完结)-网易云课堂
- python财务报表分析-浅谈利用Python分析财报找到值得投资的好公司的想法
- 自学python方法-从零开始自学python编程,你找对方法了吗?
- python是用c写的吗-Python是编写人工智能最佳的编程语言吗?
- python朗读网页-早上起床后不想动,让 Python 来帮你朗读网页吧
- 零基础可以学python吗-python零基础能学吗
- python在化学方面的应用-用Python解析化学公式
- python编程用什么电脑好-初学Python编程看哪些书比较好?
- python哪一版好用-Python 可视化工具库哪款最好用?哪款最不好用?