Cet article présente principalement en détail l'utilisation du plug-in d'arbre jQuery zTree. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. J'espère qu'il pourra aider tout le monde.
J'ai récemment créé une structure arborescente, j'ai donc utilisé le plug-in d'arborescence jQuery. Ça me fait du bien. Laissez-moi écrire un essai
La structure de base de la page est comme ça
Le style ici utilise le style de type bootstrap dans le dossier metroStyle. Bien sûr, vous devez d'abord télécharger le plug-in ztree, allez simplement directement sur Baidu. est terminé, l'API correspondante et quelques exemples sont utilisés. Ici, la vérification est utilisée. Le lien de téléchargement du modèle de boîte arbre jQuery zTree
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title> ZTREE DEMO - checkbox</title> <link rel="stylesheet" href="/css/demo.css" rel="external nofollow" > <link rel="stylesheet" href="/css/metroStyle.css" rel="external nofollow" > <script type="text/javascript" src="/js/jquery-3.2.1.js"></script> <script type="text/javascript" src="/js/jquery.ztree.core.js"></script> <script type="text/javascript" src="/js/jquery.ztree.excheck.js"></script> <script type="text/javascript" src="/js/jquery.ztree.exedit.js"></script> <script type="text/javascript"> var setting = { check: { enable: true }, data: { simpleData: { enable: true } }, callback:{ onCheck:onCheck } }; // var zNodes =[ // { id:1, pId:0, name:"随意勾选 1", open:true}, // { id:11, pId:1, name:"随意勾选 1-1", open:false}, // { id:111, pId:11, name:"随意勾选 1-1-1"}, // { id:112, pId:11, name:"随意勾选 1-1-2"}, // { id:12, pId:1, name:"随意勾选 1-2", open:false}, // { id:121, pId:12, name:"随意勾选 1-2-1"}, // { id:122, pId:12, name:"随意勾选 1-2-2"}, // { id:2, pId:0, name:"随意勾选 2", checked:false, open:false}, // { id:21, pId:2, name:"随意勾选 2-1"}, // { id:22, pId:2, name:"随意勾选 2-2", open:false}, // { id:221, pId:22, name:"随意勾选 2-2-1", checked:false}, // { id:222, pId:22, name:"随意勾选 2-2-2"}, // { id:23, pId:2, name:"随意勾选 2-3"}, // { id:3, pId:0, name:"随意勾选 3", checked:false, open:false}, // { id:231, pId:3, name:"随意勾选 3-1"}, // { id:232, pId:3, name:"随意勾选 3-2", open:false}, // { id:2321, pId:232, name:"随意勾选 3-2-1", checked:false}, // { id:2322, pId:232, name:"随意勾选 3-2-2"}, // { id:233, pId:3, name:"随意勾选 3-3"} // ]; var code; function setCheck() { var zTree = $.fn.zTree.getZTreeObj("treeDemo"), py = $("#py").attr("checked")? "p":"", sy = $("#sy").attr("checked")? "s":"", pn = $("#pn").attr("checked")? "p":"", sn = $("#sn").attr("checked")? "s":"", type = { "Y":py + sy, "N":pn + sn}; zTree.setting.check.chkboxType = type; // showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };'); // showCode('setting.check.chkboxType = { "Y" : "", "N" : "" };'); showCode('setting.check.chkboxType = { "Y" : "s", "N" : "ps" };'); // setting.check.chkboxType = { "Y" : "", "N" : "" }; } function showCode(str) { if (!code) code = $("#code"); code.empty(); code.append("<li>"+str+"</li>"); } var zNodes =[]; $(document).ready(function(){ var t = $("#treeDemo"); $.ajax({ type: "POST", url: "/Units/ListTree", dataType: 'json', success: function(result) { console.log(result); $.extend( true, zNodes, result ); console.log(zNodes); t = $.fn.zTree.init(t, setting, zNodes); // demoIframe = $("#testIframe"); } }); }); $(document).ready(function(){ $.fn.zTree.init($("#treeDemo"), setting, zNodes); setCheck(); $("#py").bind("change", setCheck); $("#sy").bind("change", setCheck); $("#pn").bind("change", setCheck); $("#sn").bind("change", setCheck); }); function onCheck(e,treeId,treeNode){ var treeObj=$.fn.zTree.getZTreeObj("treeDemo"), nodes=treeObj.getCheckedNodes(true), v=""; for(var i=0;i<nodes.length;i++){ v+=nodes[i].name + ","; alert(nodes[i].id); //获取选中节点的值 } } </script> </head> <body> <p class="tree" style="margin-left: 534px;background: #316ac5;width: 0px;"> <ul id="treeDemo" class="ztree" style="background: white;height: inherit;margin-top: 295px;"></ul> </p> <input type="checkbox" id="py" class="checkbox first" checked style="display:none;" /> <input type="checkbox" id="sy" class="checkbox first" checked style="display:none;"/> <input type="checkbox" id="pn" class="checkbox first" checked style="display:none;"/> <input type="checkbox" id="sn" class="checkbox first" checked style="display:none;"/> </body> </html>
Le contrôleur de code java. Le code est le suivant :
@Controller @RequestMapping("/Units") public class UnitsController{ @Autowired private UnitsService unitsService; @RequestMapping("/ListTree") @ResponseBody public List<JSONObject> ListTree(){ List<JSONObject> jsonList = new ArrayList<JSONObject>(); List<Units> zTreeAll = unitsService.zTreeAll(); for (Units units : zTreeAll) { JSONObject json = new JSONObject(); // { id:1, pId:0, name:"随意勾选 1", open:false} if(units.getUnitsId() == units.getNodeData()){ JSONObject json1 = new JSONObject(); json1.put("id", units.getUnitsId()); json1.put("pId", 0); json1.put("name", units.getUnitsName()); json1.put("open", false); jsonList.add(json1); json.put("id", -1); json.put("pId", units.getNodeData()); json.put("name", units.getSectorName()); json.put("open", false); }else{ json.put("id", units.getUnitsId()); json.put("pId", units.getNodeData()); json.put("name", units.getSectorName()); json.put("open", false); } jsonList.add(json); } // for (JSONObject units : jsonList) { // System.out.println(jsonList.toString()); // } return jsonList; } }
function onCheck(e,treeId,treeNode){ var treeObj=$.fn.zTree.getZTreeObj("treeDemo"), nodes=treeObj.getCheckedNodes(true), v=""; for(var i=0;i<nodes.length;i++){ v+=nodes[i].name + ","; alert(nodes[i].id); //获取选中节点的值 } }
Chargement dynamique du plug-in d'arborescence jQuery zTree
Exemple détaillé de jQuery EasyUI combiné avec la structure arborescente zTree pour créer une page Web
Chargement asynchrone ZTree et extension de la mise en œuvre de la méthode de nœud de premier niveau
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!