最近在学jsp，期末了要做项目，需要用到树状目录，百度了很多，都没有找到想要的答案，最后自己折腾了半天，才搞定。

下面我就来分享一下怎么实现一个简单的树状目录：

1. 下载jquery-treeview插件：github 百度云

2. 解压刚才下载的压缩包，并将images文件夹的中gif复制到项目中的图片管理文件夹中，如下图：



当然复制到什么地方是你自己选择

3. 然后将jquery.treeview.css复制到你项目的css管理文件中：



可选：复制demo/screen.css到项目中

4. 复制jquery.treeview.js到项目中的js管理文件夹中：



可选：复制demo/jquery.cookie.js到项目中

5. 修改jquery.treeview.css中图片的路径（一样的就可以不修改了）：



步骤4中的img是你图片所在的文件夹

6.在head标签中添加连接：

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

	<link rel="stylesheet" href="css/jquery.treeview.css" type="text/css"/>

	<!--screen.css不要也可以-->

	<link rel="stylesheet" href="css/screen.css" type="text/css"/>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

	<!--jquery.cookie.js不要也可以-->

	<script src="js/jquery.cookie.js"></script>

	<script src="js/jquery.treeview.js" type="text/javascript"></script>

<script type="text/javascript">

	$(document).ready(function(){

		$("#treeview").treeview({

			toggle: function() {

				console.log("%s was toggled.", $(this).find(">span").text());

			}

		});

	});

</script>

</head>

7.写一点代码来测试下：

<div id="main">

<ul id="treeview" class="filetree">

  	<li><span class="folder">密码修改</span>

    	<ul>

      	<li><span class="file">密码修改</span></li>

    	</ul>

  	</li>

  	<li><span class="folder">系统管理</span>

    	<ul>

      	<li><span class="file">系统管理</span></li>

    	</ul>

  	</li>

  	<li><span class="folder">行政部门</span>

    	<ul>

    		<li><span class="file">合同管理</span></li>

    		<li><span class="file">加班信息</span></li>

    		<li><span class="file">业绩报告</span></li>

    	</ul>

  	</li>

  	<li><span class="folder">考勤部门</span>

  		<ul>

  			<li><span class="file">考勤信息</span></li>

  		</ul>

  	</li>

  	<li><span class="folder">人力资源部</span>

  		<ul>

  			<li><span class="file">添加员工</span></li>

  			<li><span class="file">删除员工</span></li>

  			<li><span class="file">信息跟踪</span></li>

  			<li><span class="file">修改员工信息</span></li>

  			<li><span class="file">员工信息查询</span></li>

  			<li><span class="file">合同过期查询</span></li>

  		</ul>

  	</li>

  	<li><span class="folder">请假管理</span>

  		<ul>

  			<li><span class="file">请假审批</span></li>

  		</ul>

  	</li>

  	<li><span class="folder">招聘管理</span>

  		<ul id="tree">

  			<li><span class="folder">求职者信息管理</span>

  				<ul>

  					<li><span class="file">添加</span></li>

  					<li><span class="file">查询</span></li>

  				</ul>

  			</li>

  			<li><span class="file">添加招聘信息</span></li>

  			<li><span class="file">修改招聘信息</span></li>

  		</ul>

  	</li>

  	<li><span class="folder">财务部门</span>

  		<ul>

  			<li><span class="file">密码修改</span></li>

  			<li><span class="file">薪资管理</span></li>

  			<li><span class="file">加班信息</span></li>

  			<li><span class="file">考勤信息</span></li>

  			<li><span class="file">业绩报告</span></li>

  			<li><span class="file">固定薪资</span></li>

  		</ul>

  	</li>

  	<li><span class="folder">培训管理</span>

  		<ul>

  			<li><span class="file">添加培训</span></li>

  			<li><span class="file">修改培训信息</span></li>

  		</ul>

  	</li>

</ul>

</div>

8.运行效果：

html结合js实现简单的树状目录的更多相关文章

  1. Linux 目录详解 树状目录结构图

    1.树状目录结构图 2./目录 目录 描述 / 第一层次结构的根.整个文件系统层次结构的根目录. /bin/ 需要在单用户模式可用的必要命令(可执行文件):面向所有用户,例如:cat.ls.cp,和/ ...

  2. python os.walk处理树状目录结构的文件

    在项目工作中,时常需要用到处理文件的方法,尤其是在windows环境下的树状目录结构 os.walk恰好能完美的处理这种树状目录结构文件,能高效地帮助我们得到我们需要处理的文件 目录结构: Deskt ...

  3. HDU 2836 Traversal 简单DP + 树状数组

    题意:给你一个序列,问相邻两数高度差绝对值小于等于H的子序列有多少个. dp[i]表示以i为结尾的子序列有多少,易知状态转移方程为:dp[i] = sum( dp[j] ) + 1;( abs( he ...

  4. 洛谷 P5057 [CQOI2006]简单题 (树状数组,位运算)

    题意:有一个长度为\(n\)的数组,进行\(m\)次操作,每次读入一个值\(t\),如果\(t=1\),则将区间\([l,r]\)的数字反转,若\(t=2\),则查询下标为\(i\)的值. 题解:树状 ...

  5. tree - 列出树状目录结构

    tree - list contents of directories in a tree-like format. 树状显示目录结构 常用格式: tree [option] [directory] ...

  6. js list数据 转 树状 层级 JSON，递归生成树状 层级 JSON

    <!DOCTYPE html> <html> <head> <script> var data=[ {"id":"aaa& ...

  7. JQuery 树状结构 jQuery-treeview.js 插件

    由简入繁实现Jquery树状结构 在项目中,我们经常会需要一些树状结构的样式来显示层级结构等,比如下图的样式,之前在学.net的时候可以直接拖个服务端控件过来直接使用非常方便.但是利用Jquery的一 ...

  8. 由简入繁实现Jquery树状结构

    在项目中,我们经常会需要一些树状结构的样式来显示层级结构等,比如下图的样式,之前在学.net的时候可以直接拖个服务端控件过来直接使用非常方便.但是利用Jquery的一些插件,也是可以实现这些效果的,比 ...

  9. 51nod1019逆序数(归并排序/树状数组)

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1019 题意:中文题诶- 思路: 方法1:归并排序- 归并排序过 ...

随机推荐

  1. Weinre 远程调试移动端页面

    Weinre 是一款远程调试工具,使用JS编写, 可以让我们在电脑上直接调试运行在手机上的远程页面,当你的代码已经发布上线,这时候出现了问题,Weinre就可以帮你调试. 调试场景 调试页面在手机上. ...

  2. iOS 访问URL转码

    访问URL时,需要对字符串进行转码: urlStr = [urlStr stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding]; ...

  3. JAVA包名、类名、变量名命名规则

    类名:首字母大写,其他单词中首字母大写,其他小写; 方法名:首字母小写,其他单词中首字母大写,其他小写: 变量:首字母小写,其他单词中首字母大写,其他小写: 包名:全部小写

  4. 每天一个linux命令(24)--Linux文件类型与扩展名

    linux 文件类型和Linux 文件的文件名所代表的意义是两个不同的概念.我们通过一般应用程序而创建的比如 file.txt  file.tar.gz.这些文件虽然要用不同的程序来打开,但放在Lin ...

  5. C# Redis之ServiceStack

    前面几篇博客基本把redis基本操作学习了下,但一些高级应用并没有写进博客,例如持久化.虚拟内存等,像这些主要是通过配置文件来解决的,运维方向可能更侧重一些,对于开发者来说,可能就想知道怎么用C#来和 ...

  6. 一个小时学会MySQL数据库

    随着移动互联网的结束与人工智能的到来大数据变成越来越重要,下一个成功者应该是拥有海量数据的,数据与数据库你应该知道. 一.数据库概要 数据库(Database)是存储与管理数据的软件系统,就像一个存入 ...

  7. Palindrome Linked List leetcode

    Given a singly linked list, determine if it is a palindrome. Follow up:Could you do it in O(n) time ...

  8. 69个微信小程序常见问题

    本文转自 遇到小程序方面的问题,该去哪里提问呢? 若是能得到微信官方的解答,想必是最叫人安心的.而微信也确实提供了这么一个地方. 在微信公众平台的开发者社区,就置顶了一个「小程序常见问题 FAQ」帖. ...

  9. 1856: [Scoi2010]字符串

    1856: [Scoi2010]字符串 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 847  Solved: 434[Submit][Status] D ...

  10. SEO-站外优化规范

    站外优化规范 新站 前期(提高网站曝光率<信息发布平台>) 一． 分类目录信息发布 二． 黄页网信息发布 三． 友链平台信息发布 四． 各大论坛引蜘蛛区信息发布 五． 网址提交 六． 社区 ...