利用jQuery实现纵向排列树形图菜单代码



19 73 25



特效描述:利用jQuery实现 纵向排列 树形图 菜单代码,利用jQuery实现纵向排列树形图菜单代码

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/demo.css" type="text/css">
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
<link rel="stylesheet" href="css/zTreeStyle/animate.css" type="text/css">
<link rel="stylesheet" href="css/demo.css" type="text/css">
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
<link rel="stylesheet" href="css/zTreeStyle/animate.css" type="text/css">

2. 引入JS

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="js/jquery.ztree.exedit.js"></script>
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="js/jquery.ztree.exedit.js"></script>

3. HTML代码

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE></TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- <link rel="stylesheet" href="css/demo.css" type="text/css"> -->
<!--
-->
<SCRIPT type="text/javascript">
	var setting = {
		treeObj : null,
		check: {
			enable: true
		},
		data: {
			simpleData: {
				enable: true,
				idKey: "id",
				pIdKey: "pId",
				rootPId: 0
			}
		},
		callback: {
			onCheck: zTreeOnCheck
		},
		view: {
			showLine: false,
			showIcon: false,
			showTitle: false,
			// fontCss : {color:"red"}
		}
	};
	var zNodes =[{"id":"1","pId":"0","securityOptions":[],"corpCode":"","PERMITID":"","name":"临时设施","PROJECTNAME":"","corpId":""},{"id":"11","pId":"1","securityOptions":[],"corpCode":"","PERMITID":"","name":"施工区","PROJECTNAME":"","corpId":""},{"id":"111","pId":"11","securityOptions":[],"corpCode":"","PERMITID":"","name":"门卫室","PROJECTNAME":"","corpId":""},{"id":"112","pId":"11","securityOptions":[],"corpCode":"","PERMITID":"","name":"配电室","PROJECTNAME":"","corpId":""},{"id":"113","pId":"11","securityOptions":[],"corpCode":"","PERMITID":"","name":"仓库","PROJECTNAME":"","corpId":""},{"id":"114","pId":"11","securityOptions":[],"corpCode":"","PERMITID":"","name":"卷场机操作室","PROJECTNAME":"","corpId":""},{"id":"115","pId":"11","securityOptions":[],"corpCode":"","PERMITID":"","name":"饮水室、吸烟室","PROJECTNAME":"","corpId":""},{"id":"12","pId":"1","securityOptions":[],"corpCode":"","PERMITID":"","name":"办公区","PROJECTNAME":"","corpId":""},{"id":"121","pId":"12","securityOptions":[],"corpCode":"","PERMITID":"","name":"办公室","PROJECTNAME":"","corpId":""},{"id":"122","pId":"12","securityOptions":[],"corpCode":"","PERMITID":"","name":"医务保健室","PROJECTNAME":"","corpId":""},{"id":"123","pId":"12","securityOptions":[],"corpCode":"","PERMITID":"","name":"会议室","PROJECTNAME":"","corpId":""},{"id":"124","pId":"12","securityOptions":[],"corpCode":"","PERMITID":"","name":"现场监控","PROJECTNAME":"","corpId":""},{"id":"13","pId":"1","securityOptions":[],"corpCode":"","PERMITID":"","name":"生活区","PROJECTNAME":"","corpId":""},{"id":"131","pId":"13","securityOptions":[],"corpCode":"","PERMITID":"","name":"宿舍","PROJECTNAME":"","corpId":""},{"id":"132","pId":"13","securityOptions":[],"corpCode":"","PERMITID":"","name":"食堂和储物间","PROJECTNAME":"","corpId":""},{"id":"133","pId":"13","securityOptions":[],"corpCode":"","PERMITID":"","name":"活动室","PROJECTNAME":"","corpId":""},{"id":"134","pId":"13","securityOptions":[],"corpCode":"","PERMITID":"","name":"卫生间","PROJECTNAME":"","corpId":""},{"id":"135","pId":"13","securityOptions":[],"corpCode":"","PERMITID":"","name":"淋浴间","PROJECTNAME":"","corpId":""},{"id":"136","pId":"13","securityOptions":[],"corpCode":"","PERMITID":"","name":"洗漱间","PROJECTNAME":"","corpId":""},{"id":"2","pId":"0","securityOptions":[],"corpCode":"","PERMITID":"","name":"安全防护","PROJECTNAME":"","corpId":""},{"id":"21","pId":"2","securityOptions":[],"corpCode":"","PERMITID":"","name":"防护棚","PROJECTNAME":"","corpId":""},{"id":"211","pId":"21","securityOptions":[],"corpCode":"","PERMITID":"","name":"钢筋、木工作业区防护棚","PROJECTNAME":"","corpId":""},{"id":"212","pId":"21","securityOptions":[],"corpCode":"","PERMITID":"","name":"搅拌设备防护棚","PROJECTNAME":"","corpId":""},{"id":"22","pId":"2","securityOptions":[],"corpCode":"","PERMITID":"","name":"临边防护","PROJECTNAME":"","corpId":""},{"id":"221","pId":"22","securityOptions":[],"corpCode":"","PERMITID":"","name":"基坑周边防护","PROJECTNAME":"","corpId":""},{"id":"222","pId":"22","securityOptions":[],"corpCode":"","PERMITID":"","name":"楼层、阳台临边防护","PROJECTNAME":"","corpId":""},{"id":"223","pId":"22","securityOptions":[],"corpCode":"","PERMITID":"","name":"楼梯临边防护","PROJECTNAME":"","corpId":""},{"id":"224","pId":"22","securityOptions":[],"corpCode":"","PERMITID":"","name":"竖向洞口防护","PROJECTNAME":"","corpId":""},{"id":"225","pId":"22","securityOptions":[],"corpCode":"","PERMITID":"","name":"屋面临边防护","PROJECTNAME":"","corpId":""},{"id":"226","pId":"22","securityOptions":[],"corpCode":"","PERMITID":"","name":"安全通道","PROJECTNAME":"","corpId":""},{"id":"227","pId":"22","securityOptions":[],"corpCode":"","PERMITID":"","name":"电梯门、进口防护","PROJECTNAME":"","corpId":""},{"id":"228","pId":"22","securityOptions":[],"corpCode":"","PERMITID":"","name":"水平预留洞口防护","PROJECTNAME":"","corpId":""},{"id":"229","pId":"22","securityOptions":[],"corpCode":"","PERMITID":"","name":"悬挑式钢平台","PROJECTNAME":"","corpId":""},{"id":"3","pId":"0","securityOptions":[],"corpCode":"","PERMITID":"","name":"消防设施","PROJECTNAME":"","corpId":""},{"id":"4","pId":"0","securityOptions":[],"corpCode":"","PERMITID":"","name":"临时用电","PROJECTNAME":"","corpId":""},{"id":"41","pId":"4","securityOptions":[],"corpCode":"","PERMITID":"","name":"总配电柜(箱)、分配电箱、开关箱安装设置","PROJECTNAME":"","corpId":""},{"id":"411","pId":"41","securityOptions":[],"corpCode":"","PERMITID":"","name":"总配电柜(箱)","PROJECTNAME":"","corpId":""},{"id":"412","pId":"41","securityOptions":[],"corpCode":"","PERMITID":"","name":"分配电箱","PROJECTNAME":"","corpId":""},{"id":"413","pId":"41","securityOptions":[],"corpCode":"","PERMITID":"","name":"开关箱","PROJECTNAME":"","corpId":""},{"id":"5","pId":"0","securityOptions":[],"corpCode":"","PERMITID":"","name":"脚手架","PROJECTNAME":"","corpId":""},{"id":"51","pId":"5","securityOptions":[],"corpCode":"","PERMITID":"","name":"扣件式钢管脚手架","PROJECTNAME":"","corpId":""},{"id":"52","pId":"5","securityOptions":[],"corpCode":"","PERMITID":"","name":"型钢悬挑式脚手架","PROJECTNAME":"","corpId":""},{"id":"53","pId":"5","securityOptions":[],"corpCode":"","PERMITID":"","name":"满堂脚手架","PROJECTNAME":"","corpId":""},{"id":"54","pId":"5","securityOptions":[],"corpCode":"","PERMITID":"","name":"满堂支撑架","PROJECTNAME":"","corpId":""},{"id":"6","pId":"0","securityOptions":[],"corpCode":"","PERMITID":"","name":"基坑支护","PROJECTNAME":"","corpId":""},{"id":"61","pId":"6","securityOptions":[],"corpCode":"","PERMITID":"","name":"型钢桩横挡板支护","PROJECTNAME":"","corpId":""},{"id":"62","pId":"6","securityOptions":[],"corpCode":"","PERMITID":"","name":"混凝土灌注桩支护","PROJECTNAME":"","corpId":""},{"id":"63","pId":"6","securityOptions":[],"corpCode":"","PERMITID":"","name":"土钉墙支护","PROJECTNAME":"","corpId":""},{"id":"7","pId":"0","securityOptions":[],"corpCode":"","PERMITID":"","name":"起重机械设备","PROJECTNAME":"","corpId":""},{"id":"71","pId":"7","securityOptions":[],"corpCode":"","PERMITID":"","name":"塔吊","PROJECTNAME":"","corpId":""},{"id":"711","pId":"71","securityOptions":[],"corpCode":"","PERMITID":"","name":"保险装置设置和有效性","PROJECTNAME":"","corpId":""},{"id":"712","pId":"71","securityOptions":[],"corpCode":"","PERMITID":"","name":"多塔作业防碰撞措施","PROJECTNAME":"","corpId":""},{"id":"713","pId":"71","securityOptions":[],"corpCode":"","PERMITID":"","name":"基础安全状况","PROJECTNAME":"","corpId":""},{"id":"714","pId":"71","securityOptions":[],"corpCode":"","PERMITID":"","name":"与外电线路安全距离","PROJECTNAME":"","corpId":""},{"id":"715","pId":"71","securityOptions":[],"corpCode":"","PERMITID":"","name":"基础防护","PROJECTNAME":"","corpId":""},{"id":"716","pId":"71","securityOptions":[],"corpCode":"","PERMITID":"","name":"附着安全状况","PROJECTNAME":"","corpId":""},{"id":"717","pId":"71","securityOptions":[],"corpCode":"","PERMITID":"","name":"《黑龙江省建筑起重机械设备使用登记证》","PROJECTNAME":"","corpId":""},{"id":"72","pId":"7","securityOptions":[],"corpCode":"","PERMITID":"","name":"施工升降机","PROJECTNAME":"","corpId":""},{"id":"721","pId":"72","securityOptions":[],"corpCode":"","PERMITID":"","name":"防坠落安全器有效标定期情况","PROJECTNAME":"","corpId":""},{"id":"722","pId":"72","securityOptions":[],"corpCode":"","PERMITID":"","name":"保险装置设置和有效性","PROJECTNAME":"","corpId":""},{"id":"723","pId":"72","securityOptions":[],"corpCode":"","PERMITID":"","name":"基础安全状况","PROJECTNAME":"","corpId":""},{"id":"724","pId":"72","securityOptions":[],"corpCode":"","PERMITID":"","name":"进出主体通道防护架体安全状况","PROJECTNAME":"","corpId":""},{"id":"725","pId":"72","securityOptions":[],"corpCode":"","PERMITID":"","name":"楼层设置层数标志牌、安全标示牌","PROJECTNAME":"","corpId":""},{"id":"726","pId":"72","securityOptions":[],"corpCode":"","PERMITID":"","name":"平台出入口处安装金属防护门","PROJECTNAME":"","corpId":""},{"id":"727","pId":"72","securityOptions":[],"corpCode":"","PERMITID":"","name":"平台两侧设置防护栏杆封闭","PROJECTNAME":"","corpId":""},{"id":"728","pId":"72","securityOptions":[],"corpCode":"","PERMITID":"","name":"《黑龙江省建筑起重机械设备使用登记证》","PROJECTNAME":"","corpId":""},{"id":"73","pId":"7","securityOptions":[],"corpCode":"","PERMITID":"","name":"物料提升机","PROJECTNAME":"","corpId":""},{"id":"731","pId":"73","securityOptions":[],"corpCode":"","PERMITID":"","name":"保险装置设置和有效性","PROJECTNAME":"","corpId":""},{"id":"732","pId":"73","securityOptions":[],"corpCode":"","PERMITID":"","name":"平台出入口处安装金属防护门","PROJECTNAME":"","corpId":""},{"id":"733","pId":"73","securityOptions":[],"corpCode":"","PERMITID":"","name":"平台两侧设置防护栏杆封闭","PROJECTNAME":"","corpId":""},{"id":"734","pId":"73","securityOptions":[],"corpCode":"","PERMITID":"","name":"进出主体通道防护架体安装状况","PROJECTNAME":"","corpId":""},{"id":"735","pId":"73","securityOptions":[],"corpCode":"","PERMITID":"","name":"楼层设置层数标志牌、安全标示牌","PROJECTNAME":"","corpId":""},{"id":"736","pId":"73","securityOptions":[],"corpCode":"","PERMITID":"","name":"龙门架设置缆风绳安全状况","PROJECTNAME":"","corpId":""},{"id":"737","pId":"73","securityOptions":[],"corpCode":"","PERMITID":"","name":"卷扬机防护棚防砸、防雨状况","PROJECTNAME":"","corpId":""},{"id":"738","pId":"73","securityOptions":[],"corpCode":"","PERMITID":"","name":"基础安全状况","PROJECTNAME":"","corpId":""},{"id":"739","pId":"73","securityOptions":[],"corpCode":"","PERMITID":"","name":"《黑龙江省建筑起重机械设备使用登记证》","PROJECTNAME":"","corpId":""},{"id":"8","pId":"0","securityOptions":[],"corpCode":"","PERMITID":"","name":"文明施工","PROJECTNAME":"","corpId":""},{"id":"81","pId":"8","securityOptions":[],"corpCode":"","PERMITID":"","name":"封闭施工","PROJECTNAME":"","corpId":""},{"id":"811","pId":"81","securityOptions":[],"corpCode":"","PERMITID":"","name":"大门","PROJECTNAME":"","corpId":""},{"id":"812","pId":"81","securityOptions":[],"corpCode":"","PERMITID":"","name":"现场围挡","PROJECTNAME":"","corpId":""},{"id":"82","pId":"8","securityOptions":[],"corpCode":"","PERMITID":"","name":"施工场地","PROJECTNAME":"","corpId":""},{"id":"821","pId":"82","securityOptions":[],"corpCode":"","PERMITID":"","name":"施工现场主要干道、场地硬化","PROJECTNAME":"","corpId":""},{"id":"822","pId":"82","securityOptions":[],"corpCode":"","PERMITID":"","name":"裸土绿化和覆盖","PROJECTNAME":"","corpId":""},{"id":"823","pId":"82","securityOptions":[],"corpCode":"","PERMITID":"","name":"施工现场扬尘监测设备、洒水车、吸尘车、移动雾炮车和喷淋装置等防尘设备设置","PROJECTNAME":"","corpId":""},{"id":"824","pId":"82","securityOptions":[],"corpCode":"","PERMITID":"","name":"出口设置车辆清洗设备设置","PROJECTNAME":"","corpId":""},{"id":"83","pId":"8","securityOptions":[],"corpCode":"","PERMITID":"","name":"安全标志","PROJECTNAME":"","corpId":""},{"id":"831","pId":"83","securityOptions":[],"corpCode":"","PERMITID":"","name":"安全旗","PROJECTNAME":"","corpId":""},{"id":"832","pId":"83","securityOptions":[],"corpCode":"","PERMITID":"","name":"“五牌一图”","PROJECTNAME":"","corpId":""},{"id":"833","pId":"83","securityOptions":[],"corpCode":"","PERMITID":"","name":"工作着装、公示栏、形象镜","PROJECTNAME":"","corpId":""},{"id":"834","pId":"83","securityOptions":[],"corpCode":"","PERMITID":"","name":"安全挂图","PROJECTNAME":"","corpId":""},{"id":"835","pId":"83","securityOptions":[],"corpCode":"","PERMITID":"","name":"安全警示标牌","PROJECTNAME":"","corpId":""},{"id":"84","pId":"8","securityOptions":[],"corpCode":"","PERMITID":"","name":"隔离围挡与材料堆放","PROJECTNAME":"","corpId":""},{"id":"841","pId":"84","securityOptions":[],"corpCode":"","PERMITID":"","name":"作业区围挡","PROJECTNAME":"","corpId":""},{"id":"842","pId":"84","securityOptions":[],"corpCode":"","PERMITID":"","name":"材料堆放","PROJECTNAME":"","corpId":""},{"id":"85","pId":"8","securityOptions":[],"corpCode":"","PERMITID":"","name":"标识牌","PROJECTNAME":"","corpId":""},{"id":"851","pId":"85","securityOptions":[],"corpCode":"","PERMITID":"","name":"材料标识牌","PROJECTNAME":"","corpId":""},{"id":"852","pId":"85","securityOptions":[],"corpCode":"","PERMITID":"","name":"手脚架验收合格牌","PROJECTNAME":"","corpId":""},{"id":"853","pId":"85","securityOptions":[],"corpCode":"","PERMITID":"","name":"机械负责人标识牌","PROJECTNAME":"","corpId":""},{"id":"854","pId":"85","securityOptions":[],"corpCode":"","PERMITID":"","name":"限重标识牌","PROJECTNAME":"","corpId":""},{"id":"0","pId":"","securityOptions":[],"corpCode":"","PERMITID":"","name":"棚户区改造配套基础设施建设项目","PROJECTNAME":"","corpId":""}]
	var code;
	function setCheck() {
		var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
			type = {Y: "ps", N: "ps"}
		zTree.setting.check.chkboxType = type;
		zTree.expandAll(true); //全部展开
		showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');
		minejs();
	}
	function showCode(str) {
		if (!code) code = $("#code");
		code.empty();
		code.append("<li>"+str+"</li>");
	}
	function zTreeOnCheck(event, treeId, treeNode) {
		getSelectedNodes();
		//当前被选中对象携带参数
		// console.log(treeNode.tId + ", " + treeNode.name + "," + treeNode.checked);
	};
	function getSelectedNodes(){
		// var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		// var selectedNode = zTree.getCheckedNodes();
		// 获取当前被勾选的节点集合
		var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
		var nodes = treeObj.getCheckedNodes(true);
	}
	$(document).ready(function(){
		$.fn.zTree.init($("#treeDemo"), setting, zNodes);
		setCheck();
		$("#py").bind("change", setCheck);
		$("#sy").bind("change", setCheck);
		$("#pn").bind("change", setCheck);
		$("#sn").bind("change", setCheck);
		$('.ztree li span.button.switch').click(function(){
			minejs();
		})
	});
	function minejs(){
	}
</SCRIPT>
</HEAD>
<style>
.tabbox{width:900px; margin:10% auto; padding: 15px; height:600px; background: white;display: none}
.tabbox li,.tabbox ul{list-style-type: none}
.tabbox ul{margin: 0; padding: 0}
.tabbox .tabnav,.tabbox .tabcon{width: 98%;display: block;float: left;}
.tabbox .tabnav{border-bottom: 1px solid #ddd}
.tabbox .tabnav li{ position: relative; cursor: pointer; float: left; border-top-left-radius:5px;border-top-right-radius:5px; margin:0px;padding: 8px 26px; color: #337ab7;border:1px solid #fff; }
.tabnav li.active{border:1px solid #ddd; border-bottom:none; color: #555;}
.tabnav li.active:before{content:''; width: 100%; height: 1px; bottom: -2px; left: 0; position: absolute;background: white; }
.tabbox .tabcon li{ display: none; padding: 10px; width: 100%; height: 540px; overflow: auto;}
.tabbox .tabcon li:first-child{display: block}
.mask{position: fixed; top: 0; left: 0; width:100%; height: 100%; background: rgb(212, 212, 212); display: none}
</style>
<BODY>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
	<ul id="treeDemo" class="ztree"></ul>
	<!-- <ul id="selectObj"></ul> -->
</div>
<div class="mask">
	<div class="tabbox">
		<ul class="tabnav">
			<li class="active">施工前</li>
			<li>施工中</li>
			<li>施工后</li>
		</ul>
		<ul class="tabcon">
			<li>
					施工前 <br>
			</li>
			<li>
					施工中
			</li>
			<li>
					施工后
			</li>
		</ul>
	</div>
</div>
</div>
</BODY>
<script>
$(function(){
$('.tabnav li').click(function(){
	$('.tabnav li').removeClass('active')
	$(this).addClass('active');
	var pd = $(this).index();
	$('.tabcon li').hide()
	$('.tabcon li').eq(pd).show();
})
})
</script>
<div style="text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</HTML>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: flash导航菜单 flash导航条 flash导航 flash菜单 flash下拉菜单 flash下拉导航菜单 h5动画导航 h5动画菜单 html5动画导航 html5动画菜单 收缩菜单 收缩导航 右键菜单 导航切换 菜单切换 浮动菜单 浮动导航 滑动导航菜单 滑动导航 滑动菜单 滚动导航菜单 滚动菜单 滚动导航 收缩展开 展开收缩 收缩 展开 导航菜单 导航条 菜单栏 导航栏 分类导航 响应式导航条 响应式导航 收缩菜单 收缩导航 树形菜单 树形导航

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到