最近在学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. 由于java.util.Arrays.asList(...)导致的异常

    前言: Collections.toArray()与Arrays.asList() 是Java API提供的友好的相互转换工具,日常开发中用于列表和数组之间的转换非常方便,但今天测试时,发现一下隐藏的 ...

  2. iOS 用Swipe手势和动画实现循环播放图片

    主要想法 添加3个ImageView展示图片,实现图片的无限循环. 使用Swipe手势识别用户向右或向左滑动图片. 使用CATransition给ImageView.layer添加动画,展示图片更换的 ...

  3. Handlebars模板引擎之进阶

    取得索引 我想取得索引作为序号这个是常用的.在handlebars也是存在的. 就是使用 @index 来获取索引 {{#each this}} <tr> <td>{{ @in ...

  4. 使用moy快速开发后台管理系统（一）

    moy是什么? moy 是基于模型框架 kero 和 UI 框架 neoui 实现的应用框架,是前端集成解决方案,为企业级应用开发而生.github地址:iuap-design/tinper-moy ...

  5. 设置debian的静态IP

    欲设置的信息: IP地址:198.9.146.131 子网掩码:255.255.255.0 网关:198.9.146.254 DNS:198.9.9.1 198.9.9.2 首先编辑/etc/netw ...

  6. BOM基础（三）

    在我之前关于DOM的文章里,其实已经有提到过事件的概念.在讲事件之前,首先要知道的就是javascript是由事件驱动的.什么叫事件驱动呢?打个比方,比如我们在页面中点击一个按钮,才会跳出一个窗口或者 ...

  7. 3018: [Usaco2012 Nov]Distant Pastures

    3018: [Usaco2012 Nov]Distant Pastures Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 43  Solved: 20[ ...

  8. ASP.NET MVC创建视图过程

    MvcHandler.ProcessRequest()   (1)获取Action执行结果:context2.Result ActionExecutedContext context2 = this. ...

  9. scanf函数之扫描集

    前言 %[]是scanf函数不常用到的格式字符--扫描集(scanset),它的用法很简单,但却能巧妙地解决一些输入问题.(由于书籍里和网上对此格式字符的介绍很少且篇幅较小,本文可能会有些许错误,请读 ...

  10. php学习测试题目

    <?php     header("content-type:text/html;charset=utf-8");   /*    1.银行给客户每天万分之四的利率,本金10 ...