最近在学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. 页面添加数据的PHP

    (接前面写的) 第一个页面tianjia.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  2. fastcgi的介绍，原理及配置

    fastcgi介绍: CGI全称是“公共网关接口”(Common Gateway Interface),HTTP服务器与你的或其它机器上的程序进行“交谈”的一种工具,其程序一般运行在网络服务器上. C ...

  3. 30分钟掌握 C#6

    1. 只读自动属性(Read-only auto-properties) C# 6之前我们构建只读自动属性: public string FirstName { get; private set; } ...

  4. Java设计模式之接口型模式总结

    摘要: 原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6508967.html 之前认真学习了Java设计模式中的四大接口型模式,分别为:适 ...

  5. perl open函数

    open(DATA, "<file.txt"); # <只读打开file.txt ,DATA作为句柄 open(DATA, ">file.txt&quo ...

  6. 免费ERP之云实施

    近日,普实渠道在AIO5软件免费一周年之际,推出了重磅的动作:启动AIO5云实施,推广小微企业免费ERP落地应用. 这无疑是推动客户免费应用ERP的重大里程碑. 当前,在中国小微企业信息化方面,应用情 ...

  7. js原生Ajax 的封装和原理

    原理及概念 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是一种用于创建快速动态网页的技术. 动态网页:是指可以通过服务器语言结合数 ...

  8. wemall app微信商城系统Android之通用通知接口demo

    wemall-mobile是基于WeMall的Android app商城,只需要在原商城目录下上传接口文件即可完成服务端的配置,客户端可定制修改.本文分享Native(原生)支付模式一demo,供技术 ...

  9. JAVA高级总结

    一.集合框架和泛型 1.集合框架 1) 定义:JAVA API的一部分,用于处理一组长度可变得数据. 2) 和数组的区别: 数组的长度不可变,但是集合框架处理的数据长度可以动态变化. 3) 结构: 接 ...

  10. SSH登录与增删改查demo详解+源代码

    点击下载,测试绝对可用SSH整合框架登录加增删改查demo 下载地址:http://download.csdn.net/detail/qq_33599520/9784679   一.框架概述 spri ...