Da die Arbeiten eine Dropdown-Boxkomponente für Baum vor kurzem benötigen, gibt es nach der Suche nach Informationen im Allgemeinen zwei Implementierungsmethoden. Erstens wird es mit Ztree implementiert. Zweitens wird es mit EasyUi implementiert. Da das Front-End des Unternehmens nicht mit EasyUi konzipiert ist, habe ich ZTREE ausgewählt, um den Dropdown-Baum hier zu implementieren.
Hier wird ein einfaches Datenformat (d. H. Ein einfaches JSON -Format) ähnlich wie das folgende JSON verwendet:
var zNodes =[ {id:1, pId:0, name:"Beijing"}, {id:2, pId:0, name:"Tianjin"}, {id:3, pId:0, name:"Shanghai"}, {id:6, pId:0, name:"Chongqing"}, {id:4, pId:0, name:"Hebei Province", open:true, nocheck:true}, {id:41, pId:4, name:"Shijiazhuang"}, {id:42, pId:4, name:"Baoding"}, {id:43, pId:4, name:"Handan"}, {id:44, pId:4, name:"Chengde"}, {id:5, pId:0, name:"Guangdong Province", open:true, nocheck:true}, {id:51, pId:5, name:"Guangzhou"}, {id:52, pId:5, name:"Shenzhen"}, {id:53, pId:5, name:"Dongguan"}, {id:54, pId:5, name:"Foshan"}, {id:6, pId:0, name:"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:6, Name: "Sanming"}];Hier wird zuerst eine Entitätsbohne benötigt, um die entsprechenden gefundenen Daten wie folgt zu verkapulieren:
public class ztreenode {// id private string id; // übergeordnete ID private Zeichenfolge PID; // Name des privaten String -Namens anzeigen; //, ob es hier geöffnet werden soll (der Standard wird hier nicht geöffnet, wenn er geöffnet werden muss, auf wahr eingestellt werden) // private boolean offen; // können Sie auswählen (festlegen, ob der Knoten standardmäßig ausgewählt werden kann und der Knoten, der an True entspricht, nicht ausgewählt werden kann) // privater booleschiger Nokeck; /** Getter und Setter*/}Es ist hier zu beachten, dass der zweite Brief in PID aktiviert ist. Wenn es in Kleinbuchstaben geschrieben ist, kann es nicht in eine Baumstruktur gebaut werden. Alle sind Wurzelknoten.
Konvertieren Sie dann die aus der Datenbank gefundenen Daten in die entsprechenden Bohnen, die von ZTree benötigt werden, und konvertieren Sie sie dann in den entsprechenden JSON. Der Code ist wie folgt:
// den Produktklassifizierungsbaum erhalten und JSON public String getGoodScategoryTreejson () {Liste <GoodScategory> AllgoodScategoryList = GoodScategoryService.getGoodScategoryTreejson (); Liste <ztreenode> zTreelist = new ArrayList <ZTreenode> (); für (GoodScategory 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); }Konvertieren Sie die Liste in die entsprechende JSON -Methode wie folgt:
Das JSON -Toolkit wurde verwendet:
import org.springframework.base.util.jsonUtil; Ajax (String -Inhalt, String contentType) {try {httpServletResponse response = initresponse (contentType); response.getWriter (). Schreiben (Inhalt); response.getWriter (). Flush (); } catch (ioException e) {e.printstacktrace (); } keine zurückgeben; } // Ausgabe von AJAX Protected String ajax (String text) {return ajax (text, Header_text_content_type); } // Ausgabe von AJAX Protected String ajax (Statusstatus) {httpServletResponse response = initresponse (Header_json_Content_type); Karte <string, string> jsonmap = new HashMap <String, String> (); JSONMAP.PUT (STATUS_PARAMETER_NAME, STATUS.TOSTRING ()); JSONUTIL.TOJSON (Antwort, JSONMAP); keine zurückgeben; } // Ausgabe von AJAX Protected String AJAX (Statusstatus, String -Nachricht) {httpServletResponse Antwort = initresponse (Header_json_Content_Type); Karte <string, string> jsonmap = new HashMap <String, String> (); JSONMAP.PUT (STATUS_PARAMETER_NAME, STATUS.TOSTRING ()); jsonmap.put (message_parameter_name, message); JSONUTIL.TOJSON (Antwort, JSONMAP); keine zurückgeben; } // AJAX -geschützte Zeichenfolge gemäß Objekt ajax (Objektobjekt) {httpServletResponse response = initresponse (Header_json_Content_Type); JSONUTIL.TOJSON (Antwort, Objekt); keine zurückgeben; } // Ausgabe gemäß dem booleschen Status AJAX Protected String ajax (boolean booleanstatus) {httpServletResponse response = initresponse (Header_json_Content_type); Karte <string, Objekt> jsonmap = new HashMap <String, Object> (); JSONMAP.PUT (STATUS_PARAMETER_NAME, BOOLEANSTATUS); JSONUTIL.TOJSON (Antwort, JSONMAP); keine zurückgeben; } private httpServletResponse initresponse (String contentType) {httpServletResponse response = servletActActionContext.getResponse (); response.setContentType (contentType + "; charSet =" + Header_encoding); if (Header_no_cache) {response.setdatheader ("läuft", 1l); response.addHeader ("pragma", "no-cache"); response.setheader ("cache-control", "no-cache, no-agree, max-altern = 0"); } Rückgabeantwort; }Auf diese Weise werden die von der Rezeption erforderlichen Daten aus der Bibliothek herausgenommen und in den entsprechenden JSON eingekapselt.
Als nächstes kommt die Implementierung der Rezeption. Die JS und CSS, die die Rezeption importieren muss, sind wie folgt:
<link rel = "styleSheet" href = "$ {base} /template/ztree/css/demo.css" type = "text/css"> <link rel = "stylesheet" href = "$ {Basis} /template/ztree/ztreestle/ztreestyle/ztreestyle/ztreestyle/zreestyle/ztreestyle.cSesthleyle.cring.cs. type = "text/javaScript" src = "$ {base} /template/ztree/js/jquery.ztree.core.js"> </script>Hier werden nur Demo.CSS für sich hinzugefügt, und die anderen werden offiziell formuliert. Demo.CSS wird verwendet, um die von der offiziellen Demo verwendeten CSS wie folgt zu ändern (hier gibt es redundante Stile, die nicht gelöscht wurden).
div.content_wrap {width: 400px;} div.content_wrap div.left {float: links;} div.content_wrap div.right {float: rechts; width: 340px;} div.zreedemobackground {text-Align: 1px; #617775; Hintergrund: #fefefe; width: 220px; Höhe: 360px; Überlauf-y: scroll; Überlauf-x: Auto; {Höhe: 45px;} ul.log li {color: #666666; Listenstil: keine; padding-links: 10px;} ul.log li.dark {background-color: #e3e3e3;}/ * luler */div.Ruler {Höhe: 20px; Breite: 220px; Hintergrundfarbe: #f0f6e4; Grenze: 1px fest #333; Randboden: 5px; Cursor: Zeiger} div.Ruler div.cursor {Höhe: 20px; Breite: 30px; Hintergrundfarbe:#3c6e31; Farbe: weiß; Text-Align: Recht; Padding-Right: 5px; Cursor: Zeiger}Dann das entsprechende Dropdown-Box:
<div> <input id = "Citysel" type = "text" onclick = "showMenu (); return false;" readonly value = ""/> <input id = "treeIds" type = "Hidden" name = "goods.goodScategory.id"> <Eingabe type = "button" onclick = "showMenu ();" value = "∨"> </div> </div> 8 <div id = "Menucontent" style = "Anzeige: Keine; Position: absolut;"> <ul id = "treedemo" style = "margin-top: 0;"> </ul> </div>
Hier ist ein verstecktes Textfeld zum Speichern der entsprechenden ID des Dropdown-Box-Auswahlinhalts.
Die entsprechenden Skripte sind wie folgt:
<Script type = "text/javaScript"> var eineinstellung = {Ansicht: {dblcickexpand: false}, Daten: {simpledata: {enable: true}}, callback: {onclick: onclick}, Ansicht: {// Das entsprechende Icon wird nicht angezeigt. Funktion Onclick (E, TreeId, Treenode) {var ztree = $ .fn.ztree.getZtreeObj ("Treedemo"), nodes = ztree.getSelectednodes (), v = ""; ids = ""; nodes.sort (Funktion vergleiche (a, b) {return a.id-b.id;}); für (var i = 0, l = nodes.length; i <l; i ++) {v += node [i] .name +","; IDs + = Knoten [i] .id + ","; } if (v.Length> 0) v = v.substring (0, v.Length-1); var CityObj = $ ("#Citysel"); CityObj.attr ("Wert", v); // Die ausgewählte ID in das Feld versteckter Text einfügen, wenn (ids.length> 0) ids = ids.substring (0, ids.length-1); var treeIds = $ ("#TreeIds"); treesids.attr ("value", ids); } function showMenu () {var CityObj = $ ("#Citysel"); var CityOffset = $ ("#Citysel"). Offset (); $ ("#Menucontent"). CSS ({links: CityOffset.left + "px", top: CityOffset.top + CityObj.outerHeight () + "px"}). SlideDown ("Fast"); $ ("Körper"). Bind ("MouseDown", onkodydown); } function hidemenu () {$ ("#Menucontent"). Fadeout ("Fast"); $ ("Körper"). Unbind ("MouseDown", Onkodydown); } function onbodydown (Ereignis) {if (! (event.target.id == "MenuBtn" || event.target.id == "Menucontent" || $ (Ereignis.Target) .Parents ("#Menucontent"). Länge> 0) {hidemenu (); }} var znodes; $ (document) .ready (function () {// Daten laden $ .ajax ({async: false, cache: false, type: 'post', dataType: 'json', url: '$ {base} /admin/goods! Daten; </Script>Auf diese Weise ist ein Dropdown-Box fertig.
Wie in der Abbildung unten gezeigt:
Wenn Sie die entsprechenden Dropdown-List-Daten in der Änderungsseite zurückschreiben müssen, fügen Sie das folgende Skript hinzu:
<script type = "text/javaScript"> $ (document) .ready (function () {if ("$ {Goods.goodScategory.id}"! null);Das obige dreht sich alles um diesen Artikel. Ich hoffe, es wird für alle hilfreich sein, das Ztree-Plug-In zu lernen.