web端樹狀菜單（支持無限下級分類+修改+新增+刪除）

DEMO下載：https://download.csdn.net/download/zhi_jie/10825201

一開始在onethink後臺裏看到的，發現只能展開到3級菜單，經過我一通修改，可以無限下級分類的菜單了，可以實時修改、新增、刪除，代碼示例需要jquery與art-template.js（可以換成你習慣的模板引擎或修改成jq操作）

注意：此樹狀菜單是一級一級讀取json數據的，點擊纔會觸發下級分類，不是一次性讀取所有樹狀結構數據，這樣可以減輕些讀取壓力吧。

json數據結構：

{
	"infor":[
        {"id":"01", "title":"赤峯市森林公安局", "link":"json/02bangong.js"},
        {"id":"02", "title":"自治區森林公安局", "link":"json/02bangong.js"},
        {"id":"03", "title":"巴林左旗森林公安局", "link":"json/02bangong.js"},
        {"id":"04", "title":"松山區", "link":"json/02bangong.js"},
        {"id":"05", "title":"紅山區", "link":"json/02bangong.js"},
        {"id":"06", "title":"赤峯市林業局", "link":"json/02bangong.js"}
    ]
}

link:是下級分類數據的地址，當點擊時纔會觸發。

順便科普個小知識，谷歌瀏覽器在啓動快捷方式地址後 --allow-file-access-from-files即可本地Ajax數據了。

頁面上的“+”“-”class圖標樣式使用了Font Awesome的，你可下載使用或換成自己的

html:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>樹狀菜單 | 夕空</title>
	<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="https://aui.github.io/art-template/js/template-engines/template-web.js"></script>
	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<style type="text/css">
	html,body{margin: 0;padding: 0;height: 100%;}
/*---------------------*\
 * 樹形菜單（支持多級）
\*---------------------*/
.tree {
	width: 90%;margin: 20px auto;
    min-height:20px; padding:19px; margin-bottom:20px;border:1px solid #ccc;
    -webkit-border-radius:4px;-moz-border-radius:4px; border-radius:4px;
    -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)
}
.tree ul{padding-left: 40px;font-size: 14px;}
.tree li {
    padding:0.6em 0 0 5px; margin:0; list-style-type:none; position:relative
}
.tree li::before, .tree li::after {
    content:''; left:-20px; position:absolute;
}
.tree li::before {
    border-left:1px dotted #999; height:100%; top:0; width:1px
}
.tree li::after {
    top:1.9em; border-top:1px dotted #999; width:25px;
}
.tree li>span {
    line-height: 2.6em;-moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; border:1px solid #bbb;
    display:inline-block; padding:0 30px 0 8px; text-decoration:none
}
.tree li.parent_li>span {
    cursor:pointer
}
.tree>ul>li::before, .tree>ul>li::after {
    border:0
}
.tree li:last-child::before {
    height:1.9em
}
.tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span {
    background:#D3F0D2; border:1px solid #5FA196; color:#000
}
.tree li:hover>span{background: #D8EBF0;border:1px solid #2764C8;}
.tree form{display: inline;}
.tree input[type=text]{line-height: 22px; font-size: 15px; background-color: rgba(255,255,255,0.3);border: none;}
.tree input[type=text]:hover{background-color: #FFF;border: none;}
 
	</style>
 
 
</head>
<body>
	<br>
	<div class="tree">
		<ul>
		</ul>
	</div>
 
	<br>
	<a href="http://www.flashme.cn">www.flashme.cn</a>
 
	<div id="newtree" style="display: none;">
		<li>
			<span>
				<i></i>
				<form class="add" action="這裏是新增子項的處理地址 form:upid|title" method="post" >
					<input type="hidden" name="upid" value="">
					<input type="text" name="title" class="text" value="" placeholder="請填寫名稱">
					<input type="button" class="treeset" value="確定" />
				</form>
			</span>
			<ul></ul>
		</li>
	</div>
 
	<script type="text/html" id="tree-art">
		{{each infor as value i}}
		<li {{if value.link}}class="parent_li"{{/if}}>
			<span data-link="{{value.link}}">
				<i class="fa {{if value.link}}fa-plus-square-o{{/if}}"></i>
				<form class="list" action="這裏是表單實時更新地址 form:id|title" method="post" >
					<input type="hidden" name="id" value="{{value.id}}">
					<input type="text" name="title" class="text" value="{{value.title}}">
				</form>
				<form class="del" action="刪除目標的地址 form:id" method="post" >
					<input type="hidden" name="id" value="{{value.id}}">
					<input type="button" class="treedel" value="刪除" />
				</form>
				<input type="button" class="treeadd" value="新增" />
			</span>
			<ul></ul>
		</li>
		{{/each}}
	</script>
 
	<script type="text/javascript">
		//==========================================樹形菜單
		function tree(){
			$('.tree').on('click','li.parent_li > span', function (e) {
				var children = $(this).siblings('ul');
				if(children.children('li').length==0){
					return;
				}
				treesub(children,$(this),false);
				e.stopPropagation();
			});
			$('.tree li:has(ul)').addClass('parent_li');
		}
		function treesub($target,ev,open){
			if ($target.is(":visible") && open==false) {
				$target.hide('fast');
				ev.attr('title', '展開分支').find(' > i').addClass('fa-plus-square-o').removeClass('fa-minus-square-o');
			} else {
				$target.show('fast');
				ev.attr('title', '收起分支').find(' > i').addClass('fa-minus-square-o').removeClass('fa-plus-square-o');
			}
		}
 
		//初始樹狀菜單點擊事件
		tree();
 
		function getLinkage(url,$target){
			$.ajax({
				url:url,
				dataType:"json",
				success:function(ev){
 
					//----顯示下級菜單
					$target.children('ul').hide();//先隱藏
					var treehtml = template('tree-art', ev);
					$target.children('ul').append(treehtml);
					treesub($target.children('ul'),$target.children('span'),true);//後顯示
					//----
				},
				error: function (XHR) {
					console.log(XHR.status);
				}
			})
		}
		//--------------初始第一級列表：：
		getLinkage("json/01danwei.js", $('.tree'));
 
		//初始加載子集
		$('.tree').on('click','li>span',function(){
			var link=$(this).data('link');
			if(link && $(this).siblings('ul').children('li').length==0){
				getLinkage(link,$(this).parent());
			}
		})
 
		/* 實時更新分類信息 */
		$(".tree")
		.on("submit", "form.list", function(){
			var self = $(this);
			$.post(
				self.attr("action"),
				self.serialize(),
				function(data){
					/* 提示信息 */
					alert('返回提示...')
				},
				"json"
				);
			return false;
		})
		.on("focus","input[type=text]",function(){
			$(this).data('param',$(this).closest("form").serialize());
 
		})
		.on("blur", "input[type=text]", function(){
			if($(this).data('param')!=$(this).closest("form").serialize()){
				$(this).closest("form").submit();//提交父級form
			}
		})
		.on("click", "input[type=text]", function(e){e.stopPropagation();});
 
		// ==========================================新增子項
		$(".tree")
		.on("submit", "form.add", function(){
			var self = $(this);
			$.post(
				self.attr("action"),
				self.serialize(),
				function(data){
					//重載
					var closeul=self.closest("ul");
					closeul.html("");
					closeul.siblings('span').trigger("click");
					closeul.parent("li").addClass('parent_li');
 
					/* 提示信息 */
					alert('返回提示...')
				},
				"json"
				);
			return false;
		})
		//新增按鈕事件
		$('.tree').on('click','.treeadd',function(e){
			var parent=$(this).parent().parent();
			if(parent.find('ul>li').length==0){
				parent.children('span').trigger("click");
			}
			var newadd=$($('#newtree').html());
			newadd.find('input[name=upid]').val($(this).parent().find('input[name=id]').val());
			parent.children('ul').prepend(newadd);
			treesub(parent.children('ul'),parent.children('span'),true);
			e.stopPropagation();
		})
		//確認存儲提交
		$('.tree').on('click','.treeset',function(e){
			$(this).closest("form").submit();
		})
 
		// ==========================================刪除菜單項
		$(".tree")
		.on("submit", "form.del", function(){
			var self = $(this);
			$.post(
				self.attr("action"),
				self.serialize(),
				function(data){
					//清除自身（子分類也會一起清除）
					self.closest("li").remove();
 
					/* 提示信息 */
					alert('返回提示...')
				},
				"json"
				);
			return false;
		})
		$('.tree').on('click','.treedel',function(e){
			if(confirm('確實要刪除該菜單嗎?')){
				$(this).closest("form").submit();
			}
			e.stopPropagation();
		})
 
	</script>
</body>
</html>

如果嫌上面的菜單尺寸太大，下面是精簡版，控制ul裏的font-size大小即可縮放整個大小：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>樹狀菜單 精簡版 | 夕空</title>
	<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="https://aui.github.io/art-template/js/template-engines/template-web.js"></script>
	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<style type="text/css">
	html,body{margin: 0;padding: 0;height: 100%;}
/*---------------------*\
 * 樹形菜單（支持多級）
\*---------------------*/
.tree {
	width: 90%;margin: 20px auto;
    min-height:20px; padding:19px; margin-bottom:20px;border:1px solid #ccc;
    -webkit-border-radius:4px;-moz-border-radius:4px; border-radius:4px;
    -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)
}
.tree ul{padding-left: 20px;font-size: 16px;}
.tree li {
    list-style-type:none; margin:0; padding:0 0 0 5px; position:relative
}
.tree li::before, .tree li::after {
    content:''; left:-10px; position:absolute;
}
.tree li::before {
    border-left:1px dotted #999; height:100%; top: 0; width:1px
}
.tree li::after {
    border-top:1px dotted #999; top:1em; width:17px;
}
.tree li>span {
    border-bottom:1px solid #f0f0f0;line-height: 2em;
    display:inline-block; padding:0 20px 0 8px; text-decoration:none
}
.tree li.parent_li>span {
    cursor:pointer
}
.tree>ul>li::before, .tree>ul>li::after {
    border:0
}
.tree li:last-child::before {
    height:1em
}
.tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span {
    background:#D3F0D2; border-bottom:1px solid #5FA196; color:#000
}
.tree li:hover>span{background: #D8EBF0;border-bottom:1px solid #2764C8;}
.tree form{display: inline;}
.tree input[type=text]{line-height: 22px; font-size: 14px; background-color: rgba(255,255,255,0.3);border: none;}
.tree input[type=text]:hover{background-color: #FFF;border: none;}
 
	</style>
 
 
</head>
<body>
	<br>
	<div class="tree">
		<ul>
		</ul>
	</div>
 
	<br>
	<a href="http://www.flashme.cn">www.flashme.cn</a>
 
	<div id="newtree" style="display: none;">
		<li>
			<span>
				<i></i>
				<form class="add" action="這裏是新增子項的處理地址 form:upid|title" method="post" >
					<input type="hidden" name="upid" value="">
					<input type="text" name="title" class="text" value="" placeholder="請填寫名稱">
					<input type="button" class="treeset" value="確定" />
				</form>
			</span>
			<ul></ul>
		</li>
	</div>
 
	<script type="text/html" id="tree-art">
		{{each infor as value i}}
		<li {{if value.link}}class="parent_li"{{/if}}>
			<span data-link="{{value.link}}">
				<i class="fa {{if value.link}}fa-plus-square-o{{/if}}"></i>
				<form class="list" action="這裏是表單實時更新地址 form:id|title" method="post" >
					<input type="hidden" name="id" value="{{value.id}}">
					<input type="text" name="title" class="text" value="{{value.title}}">
				</form>
				<form class="del" action="刪除目標的地址 form:id" method="post" >
					<input type="hidden" name="id" value="{{value.id}}">
					<input type="button" class="treedel" value="刪除" />
				</form>
				<input type="button" class="treeadd" value="新增" />
			</span>
			<ul></ul>
		</li>
		{{/each}}
	</script>
 
	<script type="text/javascript">
		//==========================================樹形菜單
		function tree(){
			$('.tree').on('click','li.parent_li > span', function (e) {
				var children = $(this).siblings('ul');
				if(children.children('li').length==0){
					return;
				}
				treesub(children,$(this),false);
				e.stopPropagation();
			});
			$('.tree li:has(ul)').addClass('parent_li');
		}
		function treesub($target,ev,open){
			if ($target.is(":visible") && open==false) {
				$target.hide('fast');
				ev.attr('title', '展開分支').find(' > i').addClass('fa-plus-square-o').removeClass('fa-minus-square-o');
			} else {
				$target.show('fast');
				ev.attr('title', '收起分支').find(' > i').addClass('fa-minus-square-o').removeClass('fa-plus-square-o');
			}
		}
 
		//初始樹狀菜單點擊事件
		tree();
 
		function getLinkage(url,$target){
			$.ajax({
				url:url,
				dataType:"json",
				success:function(ev){
 
					//----顯示下級菜單
					$target.children('ul').hide();//先隱藏
					var treehtml = template('tree-art', ev);
					$target.children('ul').append(treehtml);
					treesub($target.children('ul'),$target.children('span'),true);//後顯示
					//----
				},
				error: function (XHR) {
					console.log(XHR.status);
				}
			})
		}
		//--------------初始第一級列表：：
		getLinkage("json/01danwei.js", $('.tree'));
 
		//初始加載子集
		$('.tree').on('click','li>span',function(){
			var link=$(this).data('link');
			if(link && $(this).siblings('ul').children('li').length==0){
				getLinkage(link,$(this).parent());
			}
		})
 
		/* 實時更新分類信息 */
		$(".tree")
		.on("submit", "form.list", function(){
			var self = $(this);
			$.post(
				self.attr("action"),
				self.serialize(),
				function(data){
					/* 提示信息 */
					alert('返回提示...')
				},
				"json"
				);
			return false;
		})
		.on("focus","input[type=text]",function(){
			$(this).data('param',$(this).closest("form").serialize());
 
		})
		.on("blur", "input[type=text]", function(){
			if($(this).data('param')!=$(this).closest("form").serialize()){
				$(this).closest("form").submit();//提交父級form
			}
		})
		.on("click", "input[type=text]", function(e){e.stopPropagation();});
 
		// ==========================================新增子項
		$(".tree")
		.on("submit", "form.add", function(){
			var self = $(this);
			$.post(
				self.attr("action"),
				self.serialize(),
				function(data){
					//重載修改的部分
					var closeul=self.closest("ul");
					closeul.html("");
					closeul.siblings('span').trigger("click");
					closeul.parent("li").addClass('parent_li');
 
					/* 提示信息 */
					alert('返回提示...')
				},
				"json"
				);
			return false;
		})
		//新增按鈕事件
		$('.tree').on('click','.treeadd',function(e){
			var parent=$(this).parent().parent();
			if(parent.find('ul>li').length==0){
				parent.children('span').trigger("click");
			}
			var newadd=$($('#newtree').html());
			newadd.find('input[name=upid]').val($(this).parent().find('input[name=id]').val());
			parent.children('ul').prepend(newadd);
			treesub(parent.children('ul'),parent.children('span'),true);
			e.stopPropagation();
		})
		//確認存儲提交
		$('.tree').on('click','.treeset',function(e){
			$(this).closest("form").submit();
		})
 
		// ==========================================刪除菜單項
		$(".tree")
		.on("submit", "form.del", function(){
			var self = $(this);
			$.post(
				self.attr("action"),
				self.serialize(),
				function(data){
					//清除自身（子分類也會一起清除）
					self.closest("li").remove();
 
					/* 提示信息 */
					alert('返回提示...')
				},
				"json"
				);
			return false;
		})
		$('.tree').on('click','.treedel',function(e){
			if(confirm('確實要刪除該菜單嗎?')){
				$(this).closest("form").submit();
			}
			e.stopPropagation();
		})
 
	</script>
</body>
</html>

web端樹狀菜單（支持無限下級分類+修改+新增+刪除）

json數據結構：

html:

AS3 UDP 套接字 (AIR)

AS3 以圖片某點爲中心進行縮放（改變縮放中心）

多級聯動下拉菜單支持中英文檢索

web視差滾動瀏覽 - 讓頁面看起來有縱深立體感

Ajax本地訪問谷歌瀏覽器全屏參數

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結