jquery ztree implémente une arborescence déroulante en utilisant json data

Le projet récent de l'entreprise nécessitait l'utilisation d'une liste déroulante en forme d'arbre. J'ai trouvé beaucoup de code source sur Internet et j'ai finalement utilisé zTree pour l'implémenter, car le code est plus portable et l'acquisition de données est plus facile. Sans plus tarder, passons directement au code.

index.jsp

Copier le code Le code est le suivant : " type="text/css"> " "> " > var settings = { view : { dblClickExpand : false }, data : { simpleData : { enable : true } }, callback : { beforeClick : beforeClick, onClick : onClick } } ;

//source de données json, vous pouvez également lire la chaîne json en arrière-plan et la convertir en objet json, comme indiqué ci-dessous / /var strNodes = '${jsonList}'; //var zNodes = eval("(" strNodes ")"); //Convertir la chaîne json en tableau d'objets json, strNode doit ajouter "()", sinon le la conversion ne fonctionnera pas Réussi var zNodes =[ {id:1, pId:0, name:"Beijing"}, {id:2, pId:0, name:"Tianjin"}, { id:3, pId:0, nom:"Shanghai"}, {id:6, pId:0, nom:"Chongqing"}, {id:4, pId:0, nom : "Province du Hebei", open: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"}, {id:5, pId:0, nom : "Province du Guangdong", ouvert : vrai}, {id:51, pId:5, nom:"Guangzhou"}, {id:52, pId:5, nom:"Shenzhen"}, { id:53, pId:5, nom:"Dongguan"}, {id:54, pId:5, nom:"Foshan"}, {id:6, pId:0, nom : "Province du Fujian", ouvert : vrai}, {id:61, pId:6, nom:"Fuzhou"}, {id:62, pId:6, nom:"Xiamen"}, { id:63, pId:6, name:"Quanzhou"}, {id:64, pId:6, name:"Sanming"} ]

fonction avantCliquez (treeId, treeNode ) { var check = (treeNode && !treeNode.isParent); if (!check) alert("Seules les villes peuvent être sélectionnées..."); 🎜>}

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 = nodes[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", }); function hideMenu () { $("#menuContent").fadeOut("fast"); $("body").unbind("mousedown", } 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"), paramètre, zNodes }); //--> highlight_red">Sélectionner Lors de la sélection d'une ville, appuyez sur la touche Ctrl ou Cmd pour effectuer plusieurs sélections Ville : Sélectionner fond de printemps

classe de données json Copier le code Le code est le suivant : public class EquipTypeJson { private String id; 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) { this .name = name; }

}

page du contrôleur

Copier le code Le code est le suivant : public ModelAndView List (requête HttpServletRequest, réponse HttpServletResponse, Product prod) lève une exception { Map map=new HashMap() ; List list = testService.getAllEquipType();//Obtenir les données source de la base de données JSONArray jsonArray = JSONArray.fromObject(list); = jsonArray.toString() ; //Convertir l'objet json en chaîne map.put("jsonList", json); return new ModelAndView("equip/List").addAllObjects(map); }

jquery ztree implémente une arborescence déroulante en utilisant json data_jquery