jQuery樹(shù)插件zTree使用方法詳解
最近要做一個(gè)樹(shù)結(jié)構(gòu),就使用了jQuery 的樹(shù)插件,感覺(jué)還不錯(cuò),做個(gè)隨筆
頁(yè)面的基本結(jié)構(gòu)是這樣的
這里的樣式是使用了metroStyle文件夾里的類(lèi)bootstrap風(fēng)格,當(dāng)然首先需要下載ztree插件,直接百度即可,下載完成后由對(duì)應(yīng)的api和一些例子,這里使用的是復(fù)選框模板
jQuery zTree樹(shù)的下載鏈接
頁(yè)面jsp如下:
<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); //獲取選中節(jié)點(diǎn)的值 } } </script> </head> <body> <div class="tree" style="margin-left: 534px;background: #316ac5;width: 0px;"> <ul id="treeDemo" class="ztree" style="background: white;height: inherit;margin-top: 295px;"></ul> </div> <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>
上面的死數(shù)據(jù)替換為后臺(tái)賦予的值,用的是ajax方式,當(dāng)然后臺(tái)需要用json方式進(jìn)行交互
java代碼控制器代碼如下:
@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; } }
這樣就可以實(shí)現(xiàn)所需要的樹(shù)結(jié)構(gòu),ztree樹(shù)是可以無(wú)限擴(kuò)展的,就按照個(gè)人所需,來(lái)選擇模板就可以了
jsp中的這段代碼是獲得當(dāng)前選擇值得id
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); //獲取選中節(jié)點(diǎn)的值 } }
以上就是使用ztree的基本方法,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
jquery計(jì)算出left和top,讓一個(gè)div水平垂直居中的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jquery計(jì)算出left和top,讓一個(gè)div水平垂直居中的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07jQuery點(diǎn)擊后一組圖片左右滑動(dòng)的實(shí)現(xiàn)代碼
主要是用作圖片展示的時(shí)候需要,點(diǎn)擊后一組圖片左右滑動(dòng),需要的朋友可以參考下2012-08-08Validform驗(yàn)證時(shí)可以為空否則按照指定格式驗(yàn)證
這篇文章主要介紹了Validform驗(yàn)證時(shí)可以為空否則按照指定格式驗(yàn)證的相關(guān)資料,需要的朋友可以參考下2017-10-10jQuery 獲取除某指定對(duì)象外的其他對(duì)象 ( :not() 與.not())
這篇文章主要介紹了JQuery 獲取除某指定對(duì)象外的其他對(duì)象 ( :not() 與.not()),需要的朋友可以參考下2018-10-10JQuery團(tuán)隊(duì)打造的javascript單元測(cè)試工具QUnit介紹
元測(cè)試又稱(chēng)為模塊測(cè)試,是針對(duì)程序模塊(軟件設(shè)計(jì)的最小單位)來(lái)進(jìn)行正確性檢驗(yàn)的測(cè)試工作。單元測(cè)試主要是用來(lái)檢驗(yàn)程式的內(nèi)部邏輯,也稱(chēng)為個(gè)體測(cè)試、結(jié)構(gòu)測(cè)試或邏輯驅(qū)動(dòng)測(cè)試。通常由撰寫(xiě)程式碼的程式設(shè)計(jì)師負(fù)責(zé)進(jìn)行。2010-02-02使用jQuery實(shí)現(xiàn)動(dòng)態(tài)添加小廣告
下面小編就為大家?guī)?lái)一篇使用jQuery實(shí)現(xiàn)動(dòng)態(tài)添加小廣告。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07