회사의 최근 프로젝트에서는 트리 모양의 드롭다운 상자를 사용해야 했는데, 인터넷에서 많은 소스 코드를 찾았고, 코드가 더 이식성이 있고 데이터 수집이 더 쉽기 때문에 마침내 zTree를 사용하여 이를 구현했습니다. 더 이상 고민하지 않고 바로 코드로 넘어가겠습니다. index.jsp 코드 복사 코드는 다음과 같습니다. 링크> <BR><!-- <BR>var 설정 = { <BR>보기: { <BR>dblClickExpand: false <BR>}, <BR>data: { <BR>simpleData: { <BR>enable: true <BR>} <BR>}, <BR>콜백: { <BR>beforeClick: beforeClick, <BR>onClick : onClick <BR>} <BR>}; <br><br>//json 데이터 소스, 아래와 같이 백그라운드에서 json 문자열을 읽고 이를 json 객체로 변환할 수도 있습니다<BR>/ /var strNodes = '${jsonList}' <BR>//var zNodes = eval("(" strNodes ")"); //json 문자열을 json 객체 배열로 변환합니다. strNode는 "()"를 추가해야 합니다. 변환이 작동하지 않습니다. 성공<BR>var zNodes =[ <BR>{id:1, pId:0, name:"Beijing"}, <BR>{id:2, pId:0, name:"Tianjin"}, <BR>{ id:3, pId:0, 이름:"상하이"}, <BR>{id:6, pId:0, 이름:"충칭"}, <BR>{id:4, pId:0, name:"허베이성", open:true}, <BR>{id:41, pId:4, name:"Shijiazhuang"}, <BR>{id:42, pId:4, name:"Baoding"}, <BR>{ id:43, pId:4, 이름:"한단"}, <BR>{id:44, pId:4, 이름:"청더"}, <BR>{id:5, pId:0, name:"광동성", open:true}, <BR>{id:51, pId:5, name:"광저우"}, <BR>{id:52, pId:5, name:"심천"}, <BR>{ id:53, pId:5, 이름:"Dongguan"}, <BR>{id:54, pId:5, 이름:"Foshan"}, <BR>{id:6, pId:0, name:"Fujian Province", open:true}, <BR>{id:61, pId:6, name:"Fuzhou"}, <BR>{id:62, pId:6, name:"Xiamen"}, <BR>{ id:63, pId:6, name:"Quanzhou"}, <BR>{id:64, pId:6, name:"Sanming"} <BR>] <br><br>function beforeClick (treeId, treeNode ) { <BR>var check = (treeNode && !treeNode.isParent) <BR>if (!check) Alert("도시만 선택할 수 있습니다...") <BR>return check; 🎜>} <BR><br>function onClick(e, treeId, treeNode) { <br>var zTree = $.fn.zTree.getZTreeObj("treeDemo"), <BR>nodes = zTree.getSelectedNodes(), <BR>v = " "; <BR>nodes.sort(function Compare(a,b){return a.id-b.id;}) <BR>for (var i=0, l=nodes.length; i<i ) { <BR>v = 노드[i].name "," <BR>} <BR>if (v.length > 0 ) v = v.substring(0, v.length- 1); <BR>var cityObj = $("#citySel"); <BR>cityObj.attr("value", v) <BR>} <BR><br>function showMenu() { <br>var cityObj = $(" #citySel"); <BR>var cityOffset = $("#citySel").offset() <BR>$("#menuContent").css({left:cityOffset.left "px" , top:cityOffset.top cityObj.outerHeight() "px"}).slideDown("fast") <BR><br>$("body").bind("mousedown", onBodyDown); <br>function hideMenu () { <BR>$("#menuContent").fadeOut("fast") <BR>$("body").unbind("mousedown", onBodyDown) <BR>}; 🎜>function onBodyDown( event) { <BR>if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("# menuContent").length> ;0)) { <BR>hideMenu(); <BR>} <BR>} <BR><BR>$(document).ready(function(){ <BR>$.fn.zTree .init($( "#treeDemo"), 설정, zNodes) <br>//-> <br> <body> <BR><div class="zTreeDemoBackground left"> <BR><ul class="list"> <BR><span class=" 하이라이트_레드">선택 도시를 선택할 때 Ctrl 또는 Cmd 키를 누르면 여러 항목을 선택할 수 있습니다 <BR><li class="title"> 도시:<input id=" citySel" type="text " readonly value="" style="width:120px;"/> <BR><a id="menuBtn" href="#" onclick="showMenu() return false;" >선택 <BR>