插件的官方网站: http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
官方提供的插件实例:http://jquery.bassistance.de/treeview/treeviewDemo.html

一、静态树的写法

<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(){

$("#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树控件的应用相关推荐

  1. 漂亮的JS树控件,自带8个皮肤(dhtmlxTree)

    dhtmlxTree(DHTML的扩展树)是一个功能丰富的JavaScript树形菜单 ,允许你轻松地创建有吸引力,快速装载能力下降层次树与跨浏览器兼容性,Ajax支持,在线节点编辑,和拖放的N -. ...

  2. 查找前端依赖 jquery css js 时间控件 不要用远程依赖 会变化的 card

    BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务 找到你要的版本

  3. JS组件系列——Bootstrap 树控件使用经验分享 - 懒得安分 - 博客园

    前言:很多时候我们在项目中需要用到树,有些树仅仅是展示层级关系,有些树是为了展示和编辑层级关系,还有些树是为了选中项然后其他地方调用选中项.不管怎么样,树控件都是很多项目里面不可或缺的组件之一.今天, ...

  4. activex控件 新对象 ocx 初始化_Office已经支持64位的树控件Treeview了

    之前在使用Office365时发现微软其实已经悄悄地开始提供了64位的Treeview树控件,只是并没有公开宣布.当时是在一个网友的电脑上说他可以在64位Excel中可直接使用64位树控件,当时以为他 ...

  5. QML树控件TreeView的使用(上)

    在Qt5.5之前是没有树控件的,我们在使用时用的是ListView来构造出一个树,Qt5.5之后的QML开发阶段,有了树控件TreeView,本篇着重记录QML的TreeView的使用.根据MVC分解 ...

  6. 【VBA】树控件TreeView的学习(二)

    哈喽,手机边亲爱的你还好吗?我是默默给大家分享Access知识的will. 上一篇文章我们简单讲了一下TreeView怎么 加载显示数据,TreeView上显示的数据都是手工添加的,那今天我们要来讲一 ...

  7. 【VBA树控件学习四】编辑与删除TreeView节点

    遇见春天 HI,我是默默等你来点赞的edon,大家最近忙吗? 今天,我们接着来讲一下TreeView树控件.之前,我们已经把新增节点的功能讲完了,接下来我们来讲一下编辑功能与删除功能. 这里我们只修改 ...

  8. 【VBA】树控件TreeView的学习(一)

    哈喽,手机边亲爱的你还好吗?我是默默给大家分享Access知识的will. 大家2022年快乐,从今天开始我们来讲一下树控件. 树控件在我们的开发中是经常用的到的控件也是一个重点,我会从最简单的讲起, ...

  9. jQuery:收集一些基于jQuery框架开发的控件/jquery插件2

    Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. 主页:http://letmehaveblog.blogspot.com/2007/10/ ...

最新文章

  1. R语言构建仿真数据库(sqlite)并使用dplyr语法和SQL语法查询数据库、将dplyr语法查询语句翻译为SQL查询语句
  2. mysql left join 慢 的一个原因
  3. 【Linux 内核】CFS 调度器 ④ ( 调度子系统组件模块 | 主调度器、周期性调度器 | 调度器类 )
  4. Ansible自动化运维基础-------ad-hoc
  5. php写新闻浏览历史,PHP实现浏览历史记录
  6. 获取日志$6到$NF的字段
  7. INPUT[type=file]的change事件不触发问题
  8. linux数据包注释,关于 linux中TCP数据包(SKB)序列号的小笔记
  9. springboot springmvc mybatis_12道重点的Spring Boot面试题,帮你整理好了!
  10. 自动化审批决策树助你面试更上一层楼
  11. NYOJ--6--喷水装置(一)
  12. Windows Terminal 使用 pem 文件连接服务器
  13. 基于NanoPi3(三星S5P6818)的u-boot移植(一)
  14. 基于百度翻译api的命令行翻译助手
  15. 小白常用的Widows10实用功能,让你更好掌控你的电脑。
  16. Oracle之排序会影响rownum混乱的问题
  17. js调用本地摄像头demo
  18. vs code远程编辑文件
  19. eNSP实验五:RIP路由协议
  20. 【JavaWeb-遇错】继承或者实现Servlet相关时总是报红或者包导不进来

热门文章

  1. python爬虫案例讲解-Python爬虫案例集合
  2. python精通-11周精通python计划(完结)-网易云课堂
  3. python财务报表分析-浅谈利用Python分析财报找到值得投资的好公司的想法
  4. 自学python方法-从零开始自学python编程,你找对方法了吗?
  5. python是用c写的吗-Python是编写人工智能最佳的编程语言吗?
  6. python朗读网页-早上起床后不想动,让 Python 来帮你朗读网页吧
  7. 零基础可以学python吗-python零基础能学吗
  8. python在化学方面的应用-用Python解析化学公式
  9. python编程用什么电脑好-初学Python编程看哪些书比较好?
  10. python哪一版好用-Python 可视化工具库哪款最好用?哪款最不好用?