jQuery文件树形结构菜单(springmvc)

最新推荐文章于 2021-11-12 16:31:17 发布

笔和墨

最新推荐文章于 2021-11-12 16:31:17 发布

阅读量953

点赞数

分类专栏：树形结果文章标签： jQuery树形结构

本文链接：https://blog.csdn.net/hexinghua0126/article/details/79270718

版权

树形结果专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、树形结构浏览效果

2、index.html页面代码

<!DOCTYPE HTML>
<html>

<head>
<meta charset="utf-8" />
<title>jQuery文件树形结构菜单</title>

<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css">
<style type="text/css">
	* {
		padding: 0;
		margin: 0;
		font-family: "microsoft yahei";
	}
	
	ul li {
		list-style-type: none;
	}
	
	.box {
		width: 200px;
		/*border: 1px solid red;*/
	}
	
	ul {
		margin-left: 20px;
		/*border: 1px solid blue;*/
	}
	
	.menuUl li {
		margin: 10px 0;
	}
	
	.menuUl li span:hover {
		text-decoration: underline;
		cursor: pointer;
	}
	
	.menuUl li i { margin-right: 10px; top: 0px; cursor: pointer; color: #161616; 			}
</style>

</head>
<body>

<div class="innerUl"></div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/proTree.js" ></script>
<script type="text/javascript">
//后台传入的 标题列表
var arr = [{
		id: 1,
		name: "一级标题",
		pid: 0
	}, {
		id: 2,
		name: "二级标题",
		pid: 0
	}, {
		id: 3,
		name: "2.1级标题",
		pid: 2
	}, {
		id: 4,
		name: "2.2级标题",
		pid: 2
	}, {
		id: 5,
		name: "1.1级标题",
		pid: 1
	}, {
		id: 6,
		name: "1.2级标题",
		pid: 1
	}, {
		id: 7,
		name: "1.21级标题",
		pid: 6
	}, {
		id: 8,
		name: "三级标题",
		pid: 0
	}, {
		id: 9,
		name: "1.22级标题",
		pid: 6
	}, {
		id: 10,
		name: "1.221级标题",
		pid: 9
	}, {
		id: 11,
		name: "1.2211级标题",
		pid: 10
	}, {
		id: 12,
		name: "1.2212级标题",
		pid: 10
	}

];
//标题的图标是集成bootstrap 的图标  更改 请参考bootstrap的字体图标替换自己想要的图标
$(".innerUl").ProTree({
	arr: arr,
       simIcon: "fa fa-file-o",//单个标题字体图标 不传默认glyphicon-file  //下载页面，这段忘记换字体图片了，需要手动修改
	mouIconOpen: "fa fa-folder-open-o",//含多个标题的打开字体图标  不传默认glyphicon-folder-open
	mouIconClose:"fa fa-folder-o",//含多个标题的关闭的字体图标  不传默认glyphicon-folder-close
	callback: function(id,name) {
		alert("你选择的id是" + id + "，名字是" + name);
	}

})
</script>

</body>
</html>

3、js代码（ proTree.js）

(function($) {
			var Tree = function(element, options) {
				this.element = element;
				//json数组
				this.JSONArr = options.arr;
				//单个文件图标
				this.simIcon = options.simIcon || "";
				//多个文件打开图标
				this.mouIconOpen = options.mouIconOpen || "fa fa-folder-open-o";
				//多个文件关闭图标
				this.mouIconClose = options.mouIconClose || "fa fa-folder-o";
				//回调函数
				this.callback = options.callback || function() {};
				//初始化
				this.init();

			}
			//初始化事件
			Tree.prototype.init = function() {
				//事件
				this.JSONTreeArr = this.proJSON(this.JSONArr, 0);
				this.treeHTML = this.proHTML(this.JSONTreeArr);
				this.element.append(this.treeHTML);
				this.bindEvent();
			}
			//生成树形JSON数据
			Tree.prototype.proJSON = function(oldArr, pid) {
				var newArr = [];
				var self = this;
				oldArr.map(function(item) {
					if(item.pid == pid) {
						var obj = {
							id: item.id,
							name: item.name
						}
						var child = self.proJSON(oldArr, item.id);
						if(child.length > 0) {
							obj.child = child
						}
						newArr.push(obj)
					}

				})
				return newArr;

			};
			//生成树形HTML
			Tree.prototype.proHTML = function(arr) {
				var ulHtml = "<ul class='menuUl'>";
				var self = this;
				arr.map(function(item) {
					var lihtml = "<li>";
					if(item.child && item.child.length > 0) {
						lihtml += "<i ischek='true' class='" + self.mouIconOpen + "'></i>" +
							"<span id='" + item.id + "'>" + item.name + "</span>"
						var _ul = self.proHTML(item.child);
						lihtml += _ul + "</li>";
					} else {
						lihtml += "<i class='" + self.simIcon + "'></i>" +
							"<span id='" + item.id + "'>" + item.name + "</span>";
					}
					ulHtml += lihtml;
				})
				ulHtml += "</ul>";
				return ulHtml;
			}
			Tree.prototype.bindEvent = function() {
				var self = this;
				this.element.find(".menuUl li i").click(function() {
					var ischek = $(this).attr("ischek");
					if(ischek == 'true') {
						var menuUl = $(this).closest("li").children(".menuUl");
						$(this).removeClass(self.mouIconOpen).addClass(self.mouIconClose)
						menuUl.hide();
						$(this).attr("ischek", 'false');
					} else if(ischek == 'false') {
						var menuUl = $(this).closest("li").children(".menuUl");
						menuUl.show();
						$(this).removeClass(self.mouIconClose).addClass(self.mouIconOpen)
						$(this).attr("ischek", 'true')
					}
				});

				this.element.find(".menuUl li span").click(function() {
					var id = $(this).attr("id");
					var name = $(this).text();
					self.callback(id, name)
				})
			}
			//给jquery对象拓展一个树形对象
			$.fn.extend({
				ProTree: function(options) {
					return new Tree($(this), options)
				}
			})
		})(jQuery);

4、引人js文件 jquery.min.js

5、注意：上面单个图片显示，忘记换图标了，下载载的朋友，记得更换就可以了。

 simIcon: "fa fa-file-o",//单个标题字体图标 不传默认glyphicon-file  //下载页面，这段忘记换字体图片了，需要手动修改

6、需要案例源码的朋友们，可以点击这个链接下载：

点击打开链接

笔和墨

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery文件树形结构菜单(springmvc)

1、树形结构浏览效果2、index.html页面代码jQuery文件树形结构菜单 * { padding: 0; margin: 0; font-family: "microsoft yahei"; } ul li { list-style-type: none; } .box { width: 200px; /*bor
复制链接

扫一扫