jquery ztree는 json data_jquery를 사용하여 드롭다운 트리 상자를 구현합니다.

회사의 최근 프로젝트에서는 트리 모양의 드롭다운 상자를 사용해야 했는데, 인터넷에서 많은 소스 코드를 찾았고, 코드가 더 이식성이 있고 데이터 수집이 더 쉽기 때문에 마침내 zTree를 사용하여 이를 구현했습니다. 더 이상 고민하지 않고 바로 코드로 넘어가겠습니다.

index.jsp

코드 복사 코드는 다음과 같습니다. " type="text/css"> " "> " > var 설정 = { 보기: { dblClickExpand: false }, data: { simpleData: { enable: true } }, 콜백: { beforeClick: beforeClick, onClick : onClick } };

//json 데이터 소스, 아래와 같이 백그라운드에서 json 문자열을 읽고 이를 json 객체로 변환할 수도 있습니다 / /var strNodes = '${jsonList}' //var zNodes = eval("(" strNodes ")"); //json 문자열을 json 객체 배열로 변환합니다. strNode는 "()"를 추가해야 합니다. 변환이 작동하지 않습니다. 성공 var zNodes =[ {id:1, pId:0, name:"Beijing"}, {id:2, pId:0, name:"Tianjin"}, { id:3, pId:0, 이름:"상하이"}, {id:6, pId:0, 이름:"충칭"}, {id:4, pId:0, name:"허베이성", open:true}, {id:41, pId:4, name:"Shijiazhuang"}, {id:42, pId:4, name:"Baoding"}, { id:43, pId:4, 이름:"한단"}, {id:44, pId:4, 이름:"청더"}, {id:5, pId:0, name:"광동성", open:true}, {id:51, pId:5, name:"광저우"}, {id:52, pId:5, name:"심천"}, { id:53, pId:5, 이름:"Dongguan"}, {id:54, pId:5, 이름:"Foshan"}, {id:6, pId:0, name:"Fujian Province", open:true}, {id:61, pId:6, name:"Fuzhou"}, {id:62, pId:6, name:"Xiamen"}, { id:63, pId:6, name:"Quanzhou"}, {id:64, pId:6, name:"Sanming"} ]

function beforeClick (treeId, treeNode ) { var check = (treeNode && !treeNode.isParent) if (!check) Alert("도시만 선택할 수 있습니다...") return check; 🎜>}

function onClick(e, treeId, treeNode) { var zTree = $.fn.zTree.getZTreeObj("treeDemo"), nodes = zTree.getSelectedNodes(), v = " "; nodes.sort(function Compare(a,b){return a.id-b.id;}) for (var i=0, l=nodes.length; i v = 노드[i].name "," } if (v.length > 0 ) v = v.substring(0, v.length- 1); var cityObj = $("#citySel"); cityObj.attr("value", v) }

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&gt ;0)) { hideMenu(); } }

$(document).ready(function(){ $.fn.zTree .init($( "#treeDemo"), 설정, zNodes) //-> 선택 도시를 선택할 때 Ctrl 또는 Cmd 키를 누르면 여러 항목을 선택할 수 있습니다 도시: 선택 봄 배경

json 데이터 클래스 코드 복사 코드는 다음과 같습니다. public class EquipTypeJson { private String pId; private String name;

public String getId() { return id; >} public void setId(String id) { this.id = id } public String getPId() { return pId; } public void setPId(String pId) { this.pId = pId; } public String getName() { return name; } public void setName(String name) { 이 .name = 이름 }

}

컨트롤러 페이지

코드 복사 코드는 다음과 같습니다. public ModelAndView List(HttpServletRequest request, HttpServletResponse response,Product prod) throws Exception { Map map=new HashMap() ; List list = testService.getAllEquipType();//데이터베이스에서 소스 데이터 가져오기 JSONArray jsonArray = JSONArray.fromObject(list); //목록 데이터를 json 객체로 변환 String json = jsonArray.toString() ; //json 객체를 문자열로 변환 map.put("jsonList", json) return new ModelAndView("equip/List").addAllObjects(map); }