Récemment, parce que le travail nécessite un composant de boîte déroulant d'arbre, il existe généralement deux méthodes d'implémentation après la recherche d'informations. Tout d'abord, il est implémenté à l'aide de Ztree; Deuxièmement, il est implémenté à l'aide d'EasyUi. Parce que le front-end de l'entreprise n'est pas conçu en utilisant EasyUi, j'ai choisi Ztree pour implémenter l'arbre déroulant ici.
Ici, un format de données simple (c'est-à-dire un format JSON simple) est utilisé comme le JSON suivant:
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", Ouvrir: true, nocheck: true}, {id: 41, pid: 4, nom: "shijiazhuang"}, {id: 42, pid: 4, nom: "baoding"}, {id: 43, pid: 4, nom: "handan"}, {id: 44, pid: 4, nom: "CHENGDE" Nom: "Province du Guangdong", ouvert: true, nocheck: true}, {id: 51, pid: 5, nom: "Guangzhou"}, {id: 52, pid: 5, nom: "Shenzhen"}, {id: 53, pid: 5, nom: "Donggu", {id: 54, pid: 5, "Fosh" "}, {id: 54, pid: 5," Fosh "},}, {id: 54, pid: 5," Fosh "},}, {id: 54, Pid: 5," Fosh "},}, {id: 54, Pid: 5," Fosh ""}, {id: 54, Pid: 5, "Fosh" "}, {id: 54, Pid: 5," Fosh "},}, {id: 54, Pid: 5," Fosh "},} {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, nom: "sanming"}];Ici, un haricot d'entité est d'abord nécessaire pour résumer les données trouvées correspondantes, comme suit:
classe publique zTreenode {// id ID de chaîne privée; // Parent ID Private String Pid; // Afficher le nom de chaîne privée nom; // s'il faut s'ouvrir (la valeur par défaut n'est pas ouverte ici, si elle doit être ouverte, définie sur true) // Boolean privé ouvert; // pouvez-vous sélectionner (définir si le nœud peut être sélectionné par défaut, et le nœud correspondant à Set sur true ne peut pas être sélectionné) // booléen privé nocheck; / ** Getter et setter * /}Il convient de noter ici que la deuxième lettre de PID est capitalisée. S'il est écrit en minuscules, il ne peut pas être construit en structure d'arbre. Tous sont des nœuds racine.
Ensuite, convertissez les données trouvées à partir de la base de données en haricots correspondants requis par Ztree, puis convertissez-les en JSON correspondant. Le code est le suivant:
// Obtenez l'arborescence de classification des produits et renvoyez JSON Public String GetGoodSategoryTreeJSON () {list <Woodscategory> AllGoodSategoryList = battercategoryService.GetGoodSategoryTreejson (); List <ZTreenode> zTreeList = new ArrayList <nTreenode> (); pour (bourse de bafescategory: 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); }Convertir la liste en méthode JSON correspondante, comme suit:
La boîte à outils JSON utilisée:
import org.springframework.base.util.jsonutil; private static final String header_encoding = "utf-8"; private static final boolean headr_no_cache =; private static final string header_text_content_type = "text / plain"; private static final string head_json_content_type = "text / plaine statique; ajax (String Content, String ContentType) {try {httpServletResponse Response = InitResponse (contentType); réponse.getWriter (). Write (Content); réponse.getWriter (). Flush (); } catch (ioException e) {e.printStackTrace (); } return nul; } // Sortie ajax Protected String ajax (String Text) {return ajax (text, header_text_content_type); } // Sortie ajax Protection String ajax (status status) {httpServletResponse Response = InitResponse (header_json_content_type); Map <string, string> jsonmap = new hashmap <string, string> (); jsonmap.put (status_parameter_name, status.toString ()); Jsonutil.tojson (réponse, jsonmap); retourner aucun; } // Sortie ajax Protected String ajax (statut status, chaîne message) {httpServletResponse réponse = 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 (réponse, jsonmap); retourner aucun; } // Sortie ajax Protected String Selon l'objet ajax (objet objet) {httpServletResponse Response = InitResponse (header_json_content_type); Jsonutil.tojson (réponse, objet); retourner aucun; } // Sortie en fonction du statut booléen ajax String Protected ajax (boolean booleanstatus) {httpservletResponse réponse = initResponse (header_json_content_type); Map <string, objet> jsonmap = new hashmap <string, object> (); JSONMAP.PUT (Status_Parameter_Name, BooleanStatus); Jsonutil.tojson (réponse, jsonmap); retourner aucun; } private httpServletResponse initResponse (String contentType) {httpServletResponse réponse = servletActionContext.getResponse (); réponse.setContentType (contentType + "; charSet =" + header_encoding); if (header_no_cache) {réponse.setDateHeader ("expire", 1l); Response.Addheader ("Pragma", "No-Cache"); Response.sethEader ("Cache-Control", "No-cache, No-Store, Max-Age = 0"); } Retour Response; }De cette façon, les données requises par la réception sont retirées de la bibliothèque et encapsulées dans le JSON correspondant.
Vient ensuite la mise en œuvre de la réception. Le JS et le CSS que la réception doit importer est le suivant:
<link rel = "Stylesheet" href = "$ {base} /template/ztree/css/demo.css" type = "text / css"> <link rel = "Stylesheet" href = "$ {base} /template/ztree/css/ztreyle/ztreyle.css" Type = "Text / cstreyle/ztrestyle.css" Type = "Text / CSTreyle type = "text / javascript" src = "$ {base} /template/ztree/js/jquery.ztree.core.js"> </ script>Ici, seule Demo.css est ajoutée par elle-même, et les autres sont officiellement formulées. Demo.css est utilisé pour modifier le CSS utilisé par la démo officielle, comme suit (il existe des styles redondants ici qui n'ont pas été supprimés);
div.content_wrap {width: 400px;} div.content_wrap div.left {float: gauche;} div.content_wrap div.Right {float: droite; width: 340px;} div.ztreedemobackground {text-align: gauche;} ul.ztree {margin-top: 10px; border: 1px solide: ul.ztree {margin-top: 10px; border: 1px solide: ul.ztree {margin-top: 10px; border: 1px solid: la solide ul.ztree {margin-top: 10px; # 617775; arrière-plan: #fefefe; largeur: 220px; hauteur: 360px; overflow-y: défiler; overflow-x: auto;} ul.log {border: 1px solide # 617775; fond: # f0f6e4; width: 300px; hauteur: 170px; overflow: Hidden;} ul.Log.small. {hauteur: 45px;} ul.log li {couleur: # 666666; list-style: Aucun; padding-left: 10px;} ul.log li.dark {background-color: # e3e3e3;} / * règne * / div.ruler {hauteur: 20px; Largeur: 220px; Color d'arrière-plan: # f0f6e4; bordure: 1px solide # 333; marge-fond: 5px; curseur: pointeur} div.ruler div.cursor {hauteur: 20px; Largeur: 30px; Color d'arrière-plan: # 3C6E31; Couleur: blanc; Texte-aligne: à droite; rembourrage à droite: 5px; curseur: pointeur}Ensuite, la boîte déroulante correspondante:
<div> <input id = "citysel" type = "text" onclick = "showmenu (); return false;" readonly value = "" /> <input id = "arbreids" type = "HIDDEN" name = "goods.goodsategory.id"> <input type = "bouton" onclick = "showmenu ();" Value = "∨"> </ div> </div> 8 <div id = "menucontent" style = "affiche: aucun; position: absolue;"> <ul id = "triedemo" style = "margin-top: 0;"> </ul> </div>
Voici une zone de texte cachée pour stocker l'ID correspondant du contenu de sélection de boîte déroulante.
Les scripts correspondants sont les suivants:
<Script type = "text / javascript"> var setting = {View: {dblclicKexpand: false}, data: {simpledata: {activer: true}}, callback: {onclick: onclick}, vue: {// L'icône correspondante n'est pas affichée showIcon: false}}; fonction onClick (e, arbreId, Treenode) {var ztree = $ .fn.ztree.getztreeObj ("triedemo"), nœuds = ztree.getSelectedNodes (), v = ""; ids = ""; nœuds.sort (fonction compare (a, b) {return a.id-b.id;}); pour (var i = 0, l = nœuds.length; i <l; i ++) {v + = nœuds [i] .name + ","; ids + = nœuds [i] .id + ","; } if (v.length> 0) v = v.substring (0, v.length-1); var CityObj = $ ("# Citysel"); CityObj.attr ("Valeur", v); // Mettez l'ID sélectionné dans le champ de texte caché if (ids.length> 0) ids = ids.substring (0, ids.length-1); var arbreids = $ ("# arbreids"); TreeSidS.attr ("Value", ids); } fonction showmenu () {var cityoBj = $ ("# citysel"); var cityoffset = $ ("# citysel"). offset (); $ ("# MenuContent"). CSS ({Left: CityOffset.left + "PX", TOP: CityOffset.top + CityObj.outerHeight () + "Px"}). Slidedown ("Fast"); $ ("corps"). Bind ("Mousedown", onBodydown); } function HideMenu () {$ ("# menucontent"). fadeout ("Fast"); $ ("corps"). Unbind ("Mousedown", onBodydown); } fonction onBodydown (event) {if (! (event.target.id == "menuBtn" || event.target.id == "MenuContent" || $ (event.target) .parents ("# menuContent"). Length> 0)) {HideMemenu (); }} var zNodes; $ (document) .ready (function () {// Charge Data $ .ajax ({async: false, cache: false, type: 'post', dataType: 'json', url: '$ {base} /admin/goods!GegGoodsategoryTreejson.action', error: function () {alert ('demande qui a échoué');}, success: function) {znodes = alerte); }}); $ .fn.ztree.init ($ ("# triedemo"), paramètre, zNodes); </cript>De cette façon, une boîte déroulante est terminée.
Comme indiqué dans la figure ci-dessous:
Si vous devez réécrire les données de liste déroulante correspondantes dans la page de modification, ajoutez le script suivant:
<script type = "text / javascript"> $ (document) .ready (function () {if ("$ {goods.goodsategory.id}"! = "") {var treeoBj = $ .fn.ztree.getztreeObj ("Treedemo"); var node = TreeObj.getNodeByParam ("id", "$ {goodds.goodsatte. null);Ce qui précède concerne cet article, j'espère qu'il sera utile à tout le monde d'apprendre le plug-in Ztree.