標籤：js 非同步 javascript ztree.js jquery
後台實現可以參考我以前發表的文章 地區三級聯動
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);//-1var 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);});//通過等級擷取了菜單 , seleIdfunction 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);//-1var 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);});//通過等級擷取了菜單 , seleIdfunction 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('');}
zTree.js 非同步載入地區例子
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
