Ztree 플러그인의 드롭 다운 트리로 시작하기위한 튜토리얼

최근에 작업에는 트리 드롭 다운 박스 구성 요소가 필요하기 때문에 정보를 검색 한 후에는 일반적으로 두 가지 구현 방법이 있습니다. 먼저 Ztree를 사용하여 구현됩니다. 둘째, EasyUi를 사용하여 구현됩니다. 회사의 프론트 엔드는 EasyUI를 사용하여 설계되지 않았기 때문에 여기에서 드롭 다운 트리를 구현하기 위해 Ztree를 선택했습니다.

여기서 간단한 데이터 형식 (예 : 간단한 JSON 형식)은 다음 JSON과 유사하게 사용됩니다.

 var znodes = [{id : 1, pid : 0, name : "beijing"}, {id : 2, pid : 0, name : "tianjin"}, {id : 3, pid : 0, name : "shanghai"}, {id : 6, pid : 0, 이름 : "chongqing"}, {hehongei " Open : true, nocheck : true}, {id : 41, pid : 4, name : "shijiazhuang"}, {id : 42, pid : 4, name : "baoding"}, {id : 43, pid : 4, "handan"}, {id : 44, pid : 4, name : "Chengde"}, <}, <} 이름 : "Guangdong Province", Open : True, Nocheck : True}, {id : 51, pid : 5, name : "Guangzhou"}, {id : 52, pid : 5, name : "shenzhen"}, {id : 53, pid : 5, name : "dongguan"}, 54, poshan : "foshan" {id : 6, pid : 0, 이름 : "Fujian Province", Open : True, Nocheck : True}, {id : 61, pid : 6, name : "fuzhou"}, {id : 62, pid : 6, name : "Xiamen", {id : 63, pid : 6, name : "quanzhou", {id : 64, pid : 64, pid : 64. 이름 : "Samming"}];

여기서는 엔티티 Bean이 먼저 해당 발견 된 데이터를 캡슐화해야합니다.

 공개 클래스 ztreenode {// id private string id; // 부모 ID 개인 문자열 PID; // 표시 이름 개인 문자열 이름; // 열지 여부 (기본값이 여기에서 열리지 않으며, 열어야하는 경우 true로 설정) // private boolean open; // 선택할 수 있습니까 (기본적으로 노드를 선택할 수 있는지 여부를 설정하고 TRUE에 해당하는 노드를 선택할 수 없음) // 개인 부울 nocheck; /** getter and setter*/}

여기서 PID의 두 번째 편지는 대문자로 표시되어야합니다. 소문자로 작성된 경우 트리 구조로 구성 할 수 없습니다. 모두 루트 노드입니다.

그런 다음 데이터베이스에서 찾은 데이터를 Ztree가 요구하는 해당 Bean으로 변환 한 다음 해당 JSON으로 변환합니다. 코드는 다음과 같습니다.

 // 제품 분류 트리를 가져 와서 json public string getGoodsCategoryTreejson () {list <goodscategory> allgoodscategoryList = goodsCategoryService.getGoodScategoryTreeJson (); 목록 <ztreenode> ztreelist = new Arraylist <ztreenode> (); for (goodscategory gcty : allgoodscatelylist) {ztreenode treenade = new ztreenode (); Treenade.setId (gcty.getId ()); treenade.setpid (gcty.getParent () == null? "": gcty.getParent (). getId ()); Treenade.setName (gcty.getName ()); ztreelist.add (Treenade); } return ajax (ztreelist); }

다음과 같이 목록을 해당 JSON 메소드로 변환합니다.

사용 된 JSON 툴킷 :

 import org.springframework.base.util.jsonutil; private static final string header_encoding = "utf-8"; private static final boolean boolean boolean header_no_cache = true; private static final string header_text_content_type = "text/plain"; private static final header_json_content_content_type = "text/aj"; String ajax (문자열 내용, 문자열 contenttype) {try {httpservletResponse 응답 = initResponse (contenttype); response.getWriter (). 쓰기 (내용); response.getWriter (). flush (); } catch (ioexception e) {e.printstacktrace (); } 리턴 없음; } // 출력 ajax 보호 문자열 ajax (문자열 텍스트) {return ajax (텍스트, header_text_content_type); } // 출력 ajax 보호 문자열 ajax (상태 상태) {httpservletResponse 응답 = initResponse (header_json_content_type); map <string, string> jsonmap = new Hashmap <String, String> (); JSONMAP.PUT (status_Parameter_Name, status.toString ()); jsonutil.tojson (응답, JSONMAP); 리턴 없음; } // 출력 ajax 보호 문자열 ajax (상태 상태, 문자열 메시지) {httpservletResponse 응답 = initResponse (header_json_content_type); map <string, string> jsonmap = new Hashmap <String, String> (); JSONMAP.PUT (status_Parameter_Name, status.toString ()); jsonMap.put (message_parameter_name, message); jsonutil.tojson (응답, JSONMAP); 리턴 없음; } // output ajax 보호 된 문자열 ajax (개체 객체) {httpservletResponse 응답 = initResponse (header_json_content_type); jsonutil.tojson (응답, 객체); 리턴 없음; } // 부울 상태에 따른 출력 ajax 보호 문자열 ajax (boolean booleanstatus) {httpservletresponse reponsking = initResponse (header_json_content_type); map <string, object> jsonmap = new Hashmap <string, object> (); JSONMAP.PUT (status_parameter_name, booleanstatus); jsonutil.tojson (응답, JSONMAP); 리턴 없음; } private httpservletResponse initResponse (string contenttype) {httpservletResponse 응답 = servletActionContext.getResponse (); response.setContentType (contentType + "; charset =" + header_encoding); if (header_no_cache) {response.setDateHeader ( "Expires", 1l); 응답 .addheader ( "Pragma", "No-Cache"); Response.SetHeader ( "캐시 제어", "No-Cache, No Store, Max-Age = 0"); } 반환 응답; }

이러한 방식으로 프론트 데스크에 필요한 데이터는 라이브러리에서 꺼내어 해당 JSON으로 캡슐화됩니다.

다음은 프론트 데스크의 구현입니다. 프론트 데스크가 가져와야하는 JS 및 CSS는 다음과 같습니다.

 <link rel = "stylesheet"href = "$ {base} /template/ztree/css/demo.css"type = "text/css"> <link rel = "stylesheet"href = "$} /template/ztree/css/ztreestyle/ztreestrye.cs"exts "> csss"> 텍스트 type = "text/javaScript"src = "$ {base} /template/ztree/js/jquery.ztree.core.js"> </script>

여기서는 Demo.CSS만이 자체적으로 추가되고 다른 하나는 공식적으로 공식화됩니다. Demo.CSS는 다음과 같이 공식 데모에서 사용하는 CSS를 수정하는 데 사용됩니다 (여기에는 삭제되지 않은 중복 스타일이 있습니다).

 div.content_wrap {width : 400px;} div.content_wrap div.left {float : left;} div.content_wrap div.right {float : right; width : 340px;} div.ztreedemobackgroun #617775; 배경 : #fefefe; 너비 : 220px; 높이 : 360px; 오버 플로우 -Y : 스크롤; 오버 플로우 -x : 자동;} ul.log {border : 1px solid #617775; 배경 : #f0f6e4; 너비 : 300px; {height : 45px;} ul.log li {색상 : #666666; 목록 스타일 : 없음; padding-left : 10px;} ul.log li.dark {back 너비 : 220px; 배경색 : #f0f6e4; 테두리 : 1px 고체 #333; 마진 바닥 : 5px; 커서 : 포인터} div.ruler div.cursor {높이 : 20px; 너비 : 30px; 배경색 :#3C6E31; 색상 : 흰색; 텍스트 정렬 : 맞습니다. 패딩-오른쪽 : 5px; 커서 : 포인터}

그런 다음 해당 드롭 다운 상자 :

 <div> <입력 ID = "CitySel"type = "text"onclick = "showmenu (); return false;" readOnly value = ""/> <입력 id = "treeIds"type = "hidden"name = "goods.goodscategory.id"> <입력 유형 = "button"onclick = "showmenu ();"; value = ">"> </div> </div> 8 <div id = "menucontent"style = "display : none; 위치 : 절대;"> <ul id = "treedemo"style = "margin-top : 0;"> </ul> </div>

다음은 드롭 다운 박스 선택 내용의 해당 ID를 저장하는 숨겨진 텍스트 상자입니다.

해당 스크립트는 다음과 같습니다.

 <script type = "text/javaScript"> var setting = {보기 : {dblclickexpand : false}, data : {simpledata : {enable : true}}, 콜백 : {onclick : onclick}, view : {// 해당 아이콘이 표시되지 않습니다. function onclick (e, treeid, treenode) {var ztree = $ .fn.ztree.getztreeobj ( "treedemo"), Nodes = ztree.getSelectedNodes (), v = "; ids = ""; 노드 .SORT (함수 비교 (a, b) {return A.Id-B.Id;}); for (var i = 0, l = nodes.length; i <l; i ++) {v += 노드 [i] .name +","; ids + = 노드 [i] .id + ","; } if (v.length> 0) v = v.substring (0, v.length-1); var cityobj = $ ( "#citysel"); cityobj.attr ( "value", v); // (ids.length> 0) ids = ids.substring (0, ids.length-1) 인 경우 선택한 ID를 숨겨진 텍스트 필드에 넣습니다. var treeids = $ ( "#treeids"); treesIds.attr ( "value", ids); } 함수 showMenu () {var cityobj = $ ( "#citysel"); var cityoffset = $ ( "#citysel"). 오프셋 (); $ ( "#menucontent"). css ({왼쪽 : cityOffset.left + "px", top : cityOffset.top + cityObj.outerHeight () + "px"}). 슬라이드 타운 ( "빠른"); $ ( "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")))) {hidemenu (); }} var znodes; $ (document) {function () {// 데이터로드 $ .Ajax ({async : false, cache : false, type : 'post', datatype : 'json', url : '$ {base}/admin/goods! }}); $ .fn.ztree.init ($ ( "#treedemo"), Znodes); </스크립트>

이런 식으로 드롭 다운 상자가 완성되었습니다.

아래 그림과 같이 :

수정 페이지에 해당 드롭 다운 목록 데이터를 다시 작성 해야하는 경우 다음 스크립트를 추가하십시오.

 <script type = "text/javaScript"> $ (document) .ready (function () {if ( "$ {goods.goodscate.id}"! = "") {var treeobj = $ .fn.ztree.getztreeobj ( "treedemo"); var node = treeBj.getNodeByparam ( "good", "$ {", " null); treej.selectnode (node, false) (event, goods.goodscate.id} ", node, true);

위의 내용은이 기사에 관한 모든 것입니다. 모든 사람이 Ztree 플러그인을 배우는 것이 도움이되기를 바랍니다.