zTree.js 异步加载地区例子

浏览数：85 / 时间：2015年06月09日

后台实现可以参考我以前发表的文章  地区三级联动

zTree API js 下载 点击打开链接 

一个效果demo

技术分享

<!DOCTYPE html>
<HTML>
<HEAD>
	<TITLE> ZTREE DEMO - select menu</TITLE>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" href="js/ztree/css/demo.css" type="text/css">
	<link rel="stylesheet" href="js/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
	<script type="text/javascript" src="js/ztree/js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="js/ztree/js/jquery.ztree.core-3.5.js"></script>
	<!--  <script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>
	  <script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.5.js"></script>-->
	<SCRIPT type="text/javascript">
		
		var setting = {
		    async: {
				enable: true,
				url:"/area/getAreas.do",
				autoParam:["id=code"],
				//autoParam:["id", "name=n", "level=lv"],
				//otherParam:{"otherParam":"zTreeAsyncTest"},
				//dataFilter: filter,
				type: "get"
			},
			view: {
				dblClickExpand: false
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				beforeClick: beforeClick,
				onClick: onClick
			}
		};

		var zNodes;

		function beforeClick(treeId, treeNode) {
			//var check = (treeNode && !treeNode.isParent);
			//if (!check) alert("只能选择城市...");
			return true;
		}
		
		function onClick(e, treeId, treeNode) {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
			nodes = zTree.getSelectedNodes(),
			v = "";
			var code="";
			nodes.sort(function compare(a,b){return a.id-b.id;});
			for (var i=0, l=nodes.length; i<l; i++) {
				//v += nodes[i].name + ",";
				v = nodes[i].name;
				code=nodes[i].id;
			}
			if (v.length > 0 ) v = v.substring(0, v.length);//-1
			var cityObj = $("#citySel");
			cityObj.attr("value", v);
			$("#areaCodeV").val(code);
		}

		//选 择
		function showMenu() {
			var cityObj = $("#citySel");
			var cityOffset = $("#citySel").offset();
			$("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");

			$("body").bind("mousedown", onBodyDown);
		}
		function hideMenu() {
			$("#menuContent").fadeOut("fast");
			$("body").unbind("mousedown", onBodyDown);
		}
		function onBodyDown(event) {
			if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
				hideMenu();
			}
		}

		$(document).ready(function(){
			
			$.ajax({
				url : "/area/getAreas.do",
				type : "POST",
				dataType : "json",
				data : {
					code : "P"
				},
				success : function(returnData, status) {
					if (status = "success") {
						//alert("returnData:"+returnData);
						 zNodes = returnData;
						//zNodes=dataj;
						$.fn.zTree.init($("#treeDemo"), setting, zNodes);
					}
				}
			});
			
			
			//alert(JSON.stringify(zNodes));
			//$.fn.zTree.init($("#treeDemo"), setting, zNodes);
		});
		
		//通过等级获取了菜单 , seleId
		function getAreas(level) {
			var dataj;
			$.ajax({
				url : "/area/getAreas.do",
				type : "POST",
				dataType : "json",
				data : {
					code : level
				},
				success : function(returnData, status) {
					if (status = "success") {
						alert("returnData:"+returnData);
						var dataj = returnData;
						zNodes=dataj;
					}
				}
			});
			
			return dataj;
		}
		
	</SCRIPT>
	<style type="text/css">
	</style>
 </HEAD>

<BODY>
<h1>下拉菜单</h1>
<h6>[ 文件路径: super/select_menu.html ]</h6>
<div class="content_wrap">
	<div class="zTreeDemoBackground left">
		<ul class="list">
			<li class="title">  <span class="highlight_red">
			选择城市时，按下 Ctrl 或 Cmd 键可以进行多选</span></li>
			
			<li class="title">  城市：
			<input id="citySel" type="text" readonly value="" style="width:120px;"/>
			<input id="areaCodeV" type="hidden" >
		 
		<a id="menuBtn" href="#" onclick="showMenu(); return false;">选择</a>
		
		</li>
		</ul>
	</div>
	<div class="right">
		<ul class="info">
			<li class="title"><h2>实现方法说明</h2>
				<ul class="list">
				<li>用 zTree 实现这种下拉菜单，应该说是比较容易的，你只需要控制 zTree 所在容器的隐藏/显示，以及位置即可。</li>
				<li class="highlight_red">zTree v3.x 实现了多点选中功能，因此对于需要多选的下拉菜单也易如反掌。</li>
				<li class="highlight_red">利用 setting 的各项配置参数，完全可以满足大部分的功能需求。</li>
				</ul>
			</li>
		</ul>
	</div>
</div>

<div id="menuContent" class="menuContent" style="display:none; position: absolute;">
	
	<ul id="treeDemo" class="ztree" style="margin-top:0; width:160px;"></ul>
	
	
</div>
<input type="button" id="clickVal" />
<script type="text/javascript">

$(function(){
	
	$("#clickVal").click(function()
			{
		        var vv=$("#citySel").val();
		        var code=$("#areaCodeV").val();
		        alert(vv+","+code);
			});
	
})
</script>

</BODY>
</HTML>

实际应用中代码

技术分享

<!-- 	<link rel="stylesheet" href="js/ztree/css/demo.css" type="text/css"> -->
	<link rel="stylesheet" href="js/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<!-- 	<script type="text/javascript" src="js/ztree/js/jquery-1.4.4.min.js"></script> -->
	<script type="text/javascript" src="js/ztree/js/jquery.ztree.core-3.5.js"></script>
	<script src="js/util/area.js" type="text/javascript"></script>


地区：
		 
		<input id="citySel" type="text" readonly value="" style="width:120px;" onclick="showMenu(); return false;"/>
		<input id="areaCodeV" type="hidden" >
		
		<div id="menuContent" class="menuContent" style="display:none; position: absolute; background:rgb(194, 220, 237);height:500px;OVERFLOW-Y: auto; OVERFLOW-X:hidden; ">
	      <a href="javascript:claclArea()">清空</a>
	       <ul id="treeDemo" class="ztree" style="margin-top:0; width:160px;"></ul>
	       
        </div>
		 

		var setting = {
		    async: {
				enable: true,
				url:"/area/getAreas.do",
				autoParam:["id=code"],
				//autoParam:["id", "name=n", "level=lv"],
				//otherParam:{"otherParam":"zTreeAsyncTest"},
				//dataFilter: filter,
				type: "get"
			},
			view: {
				dblClickExpand: false
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				beforeClick: beforeClick,
				onClick: onClick
			}
		};

		var zNodes;

		function beforeClick(treeId, treeNode) {
			//var check = (treeNode && !treeNode.isParent);
			//if (!check) alert("只能选择城市...");
			return true;
		}
		
		function onClick(e, treeId, treeNode) {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
			nodes = zTree.getSelectedNodes(),
			v = "";
			var code="";
			nodes.sort(function compare(a,b){return a.id-b.id;});
			for (var i=0, l=nodes.length; i<l; i++) {
				//v += nodes[i].name + ",";
				v = nodes[i].name;
				code=nodes[i].id;
			}
			if (v.length > 0 ) v = v.substring(0, v.length);//-1
			var cityObj = $("#citySel");
			cityObj.attr("value", v);
			$("#areaCodeV").val(code);
		}

		//选 择
		function showMenu() {
			var cityObj = $("#citySel");
			var cityOffset = $("#citySel").offset();
			$("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");

			$("body").bind("mousedown", onBodyDown);
		}
		function hideMenu() {
			$("#menuContent").fadeOut("fast");
			$("body").unbind("mousedown", onBodyDown);
		}
		function onBodyDown(event) {
			if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
				hideMenu();
			}
		}

		$(document).ready(function(){
			
			$.ajax({
				url : "/area/getAreas.do",
				type : "POST",
				dataType : "json",
				data : {
					code : "P"
				},
				success : function(returnData, status) {
					if (status = "success") {
						//alert("returnData:"+returnData);
						 zNodes = returnData;
						//zNodes=dataj;
						$.fn.zTree.init($("#treeDemo"), setting, zNodes);
					}
				}
			});
			
			
			//alert(JSON.stringify(zNodes));
			//$.fn.zTree.init($("#treeDemo"), setting, zNodes);
		});
		
		//通过等级获取了菜单 , seleId
		function getAreas(level) {
			var dataj;
			$.ajax({
				url : "/area/getAreas.do",
				type : "POST",
				dataType : "json",
				data : {
					code : level
				},
				success : function(returnData, status) {
					if (status = "success") {
						alert("returnData:"+returnData);
						var dataj = returnData;
						zNodes=dataj;
					}
				}
			});
			
			return dataj;
		}
		
		//清空
		function claclArea()
		{
			$("#citySel").val('');
			$("#areaCodeV").val('');
		}


郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： js 异步 javascript ztree.js jquery js 异步 javascript ztree.js jquery

相关文章

随机文章

您可能还喜欢

您可能还喜欢