บทช่วยสอนสำหรับการเริ่มต้นด้วยต้นไม้แบบเลื่อนลงในปลั๊กอิน ztree

เมื่อเร็ว ๆ นี้เนื่องจากงานต้องใช้ส่วนประกอบกล่องแบบหล่นลงต้นไม้โดยทั่วไปมีวิธีการติดตั้งสองวิธีหลังจากค้นหาข้อมูล ก่อนอื่นจะถูกนำไปใช้โดยใช้ ztree; ประการที่สองมันถูกนำไปใช้โดยใช้ EasyUI เนื่องจากส่วนหน้าของ บริษัท ไม่ได้ถูกออกแบบมาโดยใช้ EasyUI ฉันจึงเลือก Ztree เพื่อใช้ต้นไม้แบบเลื่อนลงที่นี่

ที่นี่รูปแบบข้อมูลอย่างง่าย (เช่นรูปแบบ JSON แบบง่าย) ใช้คล้ายกับ JSON ต่อไปนี้:

 var znodes = [{id: 1, pid: 0, ชื่อ: "Beijing"}, {id: 2, pid: 0, ชื่อ: "tianjin"}, {id: 3, pid: 0, ชื่อ: "Shanghai"}, {id: 6, pid: 0, ชื่อ: เปิด: จริง, nocheck: true}, {id: 41, pid: 4, ชื่อ: "shijiazhuang"}, {id: 42, pid: 4, ชื่อ: "baoding"}, {id: 43, pid: 4, ชื่อ: "handan"}, {id: 44 ชื่อ: "มณฑลกวางตุ้ง", เปิด: จริง, nocheck: true}, {id: 51, pid: 5, ชื่อ: "guangzhou"}, {id: 52, pid: 5, ชื่อ: "Shenzhen"}, {id: 53, pid: 5, ชื่อ: "Dongguan"} {id: 6, PID: 0, ชื่อ: "Fujian Province", Open: True, NoCheck: true}, {id: 61, pid: 6, ชื่อ: "Fuzhou"}, {id: 62, pid: 6, ชื่อ: "Xiamen"}, {id: 63, pid: 6, pid: ชื่อ: "Sanming"}];

ที่นี่จำเป็นต้องใช้ถั่วเอนทิตีเป็นครั้งแรกในการห่อหุ้มข้อมูลที่พบที่เกี่ยวข้องดังนี้:

 คลาสสาธารณะ ztreenode {// id id id สตริงส่วนตัว; // รหัสหลักสตริงส่วนตัว PID; // แสดงชื่อชื่อสตริงส่วนตัว; // ว่าจะเปิด (ค่าเริ่มต้นไม่ได้เปิดที่นี่หรือไม่หากจำเป็นต้องเปิดให้ตั้งค่าเป็นจริง) // บูลีนส่วนตัวเปิด; // คุณสามารถเลือก (ตั้งค่าว่าโหนดสามารถเลือกได้ตามค่าเริ่มต้นและโหนดที่สอดคล้องกันเพื่อตั้งค่าเป็นจริงไม่สามารถเลือกได้) // บูลีนส่วนตัว noCheck; /** getter และ setter*/}

ควรสังเกตที่นี่ว่าจดหมายฉบับที่สองใน PID เป็นตัวพิมพ์ใหญ่ หากเขียนในตัวพิมพ์เล็กจะไม่สามารถสร้างเป็นโครงสร้างต้นไม้ได้ ทั้งหมดเป็นโหนดรูท

จากนั้นแปลงข้อมูลที่พบจากฐานข้อมูลเป็นถั่วที่สอดคล้องกันที่กำหนดโดย ztree จากนั้นแปลงเป็น JSON ที่เกี่ยวข้อง รหัสมีดังนี้:

 // รับแผนผังการจำแนกผลิตภัณฑ์และส่งคืนสตริงสาธารณะ JSON GetGoodScategoryTreeJson () {รายการ <HotesCategory> AllGoodScategoryList = GoodsCategoryService.getGoodScategoryTreejson (); รายการ <ztreenode> ztreelist = new ArrayList <ztreenode> (); สำหรับ (GOODSCATEDORY GCTY: AllGoodScategoryList) {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 ที่ใช้:

 นำเข้า org.springframework.base.util.jsonutil; สตริงสุดท้ายคงที่ส่วนตัวส่วนหัว header_encoding = "utf-8"; private static boolean final boolean header_no_cache = true; header_ttepetent_type = texttent/adtype = "ข้อความ สตริง ajax (เนื้อหาสตริง, สตริง contentType) {ลอง {httpservletResponse response = initResponse (contentType); Response.getWriter (). เขียน (เนื้อหา); Response.getWriter (). Flush (); } catch (ioexception e) {e.printstacktrace (); } return none; } // output สตริง Ajax ป้องกัน ajax (ข้อความสตริง) {return ajax (text, header_text_content_type); } // output สตริง Ajax ป้องกัน ajax (สถานะสถานะ) {httpservletResponse response = initResponse (header_json_content_type); แผนที่ <สตริง, สตริง> jsonMap = ใหม่ hashmap <สตริง, สตริง> (); jsonmap.put (status_parameter_name, status.toString ()); jsonutil.tojson (การตอบสนอง, jsonmap); ไม่กลับมา; } // output สตริง AJAX ที่ป้องกัน ajax (สถานะสถานะข้อความสตริง) {httpservletResponse response = initResponse (header_json_content_type); แผนที่ <สตริง, สตริง> jsonMap = ใหม่ hashmap <สตริง, สตริง> (); jsonmap.put (status_parameter_name, status.toString ()); jsonmap.put (message_parameter_name, ข้อความ); jsonutil.tojson (การตอบสนอง, jsonmap); ไม่กลับมา; } // เอาต์พุตสตริงป้องกัน AJAX ตามวัตถุ AJAX (วัตถุวัตถุ) {httpservletResponse Response = InitResponse (header_json_content_type); jsonutil.tojson (การตอบสนอง, วัตถุ); ไม่กลับมา; } // เอาต์พุตตามสถานะบูลีน AJAX ที่ได้รับการป้องกันสตริง ajax (บูลีนบูลีนสตาทัส) {httpservletResponse Response = InitResponse (header_json_content_type); แผนที่ <string, Object> JSONMAP = ใหม่ HashMap <String, Object> (); jsonmap.put (status_parameter_name, booleanstatus); jsonutil.tojson (การตอบสนอง, jsonmap); ไม่กลับมา; } ส่วนตัว httpservletResponse initResponse (สตริง ContentType) {httpservletResponse response = servletactionContext.getResponse (); Response.SetContentType (ContentType + "; charset =" + header_encoding); if (header_no_cache) {response.setDateHeader ("หมดอายุ", 1l); Response.addheader ("Pragma", "No-cache"); Response.Setheader ("Cache-Control", "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 = "$ {base} 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: ซ้าย;} div.content_wrap div.right {float: ขวา; ความกว้าง: 340px;} div.ztreedemobackground #617775; พื้นหลัง: #fefefe; Width: 220px; ความสูง: 360px; overflow-y: scroll; overflow-x: auto;} ul.log {ชายแดน: 1px ของแข็ง #617775; {ความสูง: 45px;} ul.log li {color: #666666; list-style: none; padding-left: 10px;} ul.log li.dark {พื้นหลังสี: #e3e3e3;}/ * ruler */div.ruler {ความสูง: 20px; ความกว้าง: 220px; พื้นหลังสี: #f0f6e4; ชายแดน: 1px solid #333; ขอบด้านล่าง: 5px; เคอร์เซอร์: ตัวชี้} div.ruler div.cursor {ความสูง: 20px; ความกว้าง: 30px; พื้นหลังสี:#3C6E31; สี: สีขาว; TEXT-ALIGING: ถูกต้อง; Padding-Right: 5px; เคอร์เซอร์: ตัวชี้}

จากนั้นกล่องดรอปดาวน์ที่สอดคล้องกัน:

 <div> <อินพุต id = "citysel" type = "text" onclick = "showmenu (); return false;" restonly value = ""/> <input id = "treeIds" type = "hidden" name = "goods.goodscategory.id"> <อินพุต type = "ปุ่ม" onclick = "showmenu ();" value = "∨"> </div> </div> 8 <div id = "menucontent" style = "แสดง: ไม่มี; ตำแหน่ง: สัมบูรณ์;"> <ul id = "treedemo" style = "margin-top: 0;"> </ul> </div>

นี่คือกล่องข้อความที่ซ่อนอยู่เพื่อจัดเก็บ ID ที่สอดคล้องกันของเนื้อหาการเลือกกล่องแบบเลื่อนลง

สคริปต์ที่เกี่ยวข้องมีดังนี้:

 <script type = "text/javascript"> var setting = {view: {dblclickexpand: false}, ข้อมูล: {simpledata: {enable: true}}, callback: {onclick: onclick}, ดู: {// icon ที่สอดคล้องกัน ฟังก์ชั่น onclick (e, treeId, treenode) {var ztree = $ .fn.ztree.getZtreeObj ("treedemo"), nodes = ztree.getSelectedNodes (), v = ""; ids = ""; NOODES.SORT (ฟังก์ชั่นเปรียบเทียบ (A, B) {return A.ID-B.ID;}); สำหรับ (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 ("ค่า", v); // ใส่รหัสที่เลือกไว้ในฟิลด์ข้อความที่ซ่อนอยู่ถ้า (ids.length> 0) ids = ids.substring (0, ids.length-1); var treeids = $ ("#treeids"); treeids.attr ("ค่า", ids); } function showmenu () {var cityobj = $ ("#citysel"); var cityoffset = $ ("#citysel"). Offset (); $ ("#menucontent"). css ({ซ้าย: cityoffset.left + "px", ด้านบน: cityoffset.top + cityobj.outerheight () + "px"}) slidedown ("เร็ว"); $ ("body"). ผูก ("mousedown", onbodydown); } ฟังก์ชั่น hidemenu () {$ ("#menucontent"). fadeout ("เร็ว"); $ ("body"). unbind ("mousedown", onbodydown); } ฟังก์ชั่น onbodydown (เหตุการณ์) {ถ้า (! (event.target.id == "menubtn" || event.target.id == "menucontent" || $ (event.target) .parents ("#menucontent"). ความยาว> 0)) {Hidemenu (); }} var znodes; $ (document) .ready (function () {// โหลด data $ .ajax ({async: false, cache: false, type: 'post', datatype: 'json', url: '$ {base} /admin/goods! ข้อมูล;}}); </script>

ด้วยวิธีนี้กล่องแบบเลื่อนลงจะเสร็จสิ้น

ดังที่แสดงในรูปด้านล่าง:

หากคุณต้องการเขียนข้อมูลรายการดรอปดาวน์ที่เกี่ยวข้องในหน้าการปรับเปลี่ยนให้เพิ่มสคริปต์ต่อไปนี้:

 <script type = "text/javascript"> $ (เอกสาร) .ready (function () {ถ้า ("$ {goods.goodscategory.id}"! = "") {var treeobj = $ .fn.ztree.getztreeobj ("treedemo"); null);

ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้ปลั๊กอิน ztree