我用到的版本ztree core v3.5.24，需要引入的js，css，jquery.js，jquery.ztree.core.js，jquery.ztree.excheck.js（多選框可選），zTreeStyle.css。
需要注意的指向父節點的pId，我開始寫的是pid一開始沒注意，默認的是pId，當然可以pIdKey指定自定義的（未測）。還有如果圖片沒顯示肯定是沒引入img圖片，記得寫好路徑。
1、先介紹初始化加載ztree
jsp
<div > <ul id="treeDemo" class="ztree" style="margin-top: 0; width: 160px;"> </ul> </div>
js
<script type="text/javascript">$(function(){ $.ajax({ url: '${contextPath}/om/quoteOmRequest.do?flag=init', data: { name : '1' //隨便寫的，傳入后臺的值 }, type:'post', traditional: true, success: function(data){ var dataObj = eval(data); var zTreeObj; var setting = { data: { simpleData: { enable:true, /* idKey: "id", pIdKey: "pId" */ } }, check: { enable: true, chkboxType :{ "Y" : "", "N" : "s" } //Y:勾選（參數：p:影響父節點），N：不勾（參數s：影響子節點）[p 和 s 為參數，參數都不寫""為全不影響] }, callback: { onCheck: function() { var zTree = $.fn.zTree.getZTreeObj("treeDemo"); var checkCount = zTree.getCheckedNodes(true); var classpurview = ""; for(var i=0;i<checkCount.length;i++) { classpurview += checkCount[i].id+"," //存入數據的id，比如這種形式"1,2,5," 后臺截取下 } /* alert(classpurview); */ } , }, view: { showLine: true, showIcon: true, dblClickExpand: true }, }; var zNodes = dataObj; $(document).ready(function(){ $.fn.zTree.init($("#treeDemo"), setting, zNodes); }); }, error : function() { alert("異常！"); } });});</script>后臺部分可以參考2延遲加載
2、延遲加載ztree
jsp一樣的，js有所有區別，這個參考了官方api
<script type="text/javascript">var setting = { view: { selectedMulti: false }, check: { enable: true, chkboxType :{ "Y" : "", "N" : "s" } //Y:勾選（參數：p:影響父節點），N：不勾（參數s：影響子節點）[p 和 s 為參數，參數都不寫""為全不影響] }, async: { enable: true, url:"${contextPath}/om/quoteOmRequest.do?flag=ajax", autoParam:["id"], dataFilter: filter }, callback: { beforeClick: beforeClick, } }; function filter(treeId, parentNode, childNodes) { if (!childNodes) return null; for (var i=0, l=childNodes.length; i<l; i++) { childNodes[i].name = childNodes[i].name.replace(//.n/g, '.'); } return childNodes; } function beforeClick(treeId, treeNode) { if (!treeNode.isParent) { alert("請選擇父節點，此節點是根節點..."); return false; } else { return true; } } $(document).ready(function(){ $.fn.zTree.init($("#treeDemo"), setting); });</script>后臺部分，也包含了1的后臺，先看核心代碼，這個用的struts，哪個框架都差不多。
String flag = request.getParameter("flag"); if(flag.equals("init")){//直接加載ztree List<Inner> list = getTrees();//得到所有節點 try { convertListToJson(list); } catch (Exception e) { e.printStackTrace(); } }else if(flag.equals("ajax")){//延遲加載ztree String id = request.getParameter("id"); if(id==null){//第一次進入初始化父節點 List<Inner> list = new ArrayList<OmRequestImpl.Inner>(); Inner in1=getById(1); Inner in5=getById(5); list.add(in1); list.add(in5);//測試用的，得到初始化0級父節點，應該從數據庫中獲取。 try { convertListToJson(list); } catch (Exception e) { e.printStackTrace(); } }else{//根據父節點id加載對應的子節點 List<Inner> list = getChilds(Integer.valueOf(id));//通過父id取得子節點集合，測試就自己寫個方法，應該從數據庫中獲取。 try { convertListToJson(list); } catch (Exception e) { e.printStackTrace(); } } }這里涉及了一些方法，我為了測試方便自己寫了個測試bean，正式的直接從數據庫中獲取。下面是bean及一些小方法。
public class Inner{ private Integer id; private Integer pId; //指向父節點id private String name; //顯示的內容 private String isParent;//是否是父節點 public Inner(){ this.isParent="false"; } public String getIsParent() { return isParent; } public void setIsParent(String isParent) { this.isParent = isParent; } public Integer getpId() { return pId; } public void setpId(Integer pId) { this.pId = pId; } public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; }}// -- 將運行結果用json字符返回客戶端 public void convertListToJson(List<?> list)throws Exception{ JSONArray json = JSONArray.fromObject(list); response.setHeader("Cache-Control", "no-cache"); response.setContentType("text/html; charset=UTF-8"); PrintWriter writer; writer = response.getWriter(); writer.write(json.toString()); writer.close(); }這些方法可忽略，測試用的，可通過數據庫獲取
public List<Inner> getTrees(){ Inner in=new Inner(); in.setId(1); in.setpId(0); in.setIsParent("true"); in.setName("父節點1"); Inner in1=new Inner(); in1.setId(2); in1.setpId(1); in1.setName("子節點11"); in1.setIsParent("true"); Inner in2=new Inner(); in2.setId(3); in2.setpId(1); in2.setName("子節點12"); Inner in3=new Inner(); in3.setId(4); in3.setpId(2); in3.setName("子節點111"); Inner in4=new Inner(); in4.setId(5); in4.setpId(0); in4.setIsParent("true"); in4.setName("父節點2"); Inner in5=new Inner(); in5.setId(6); in5.setpId(5); in5.setName("子節點21"); List<Inner> list=new ArrayList<Inner>(); list.add(in); list.add(in1); list.add(in2); list.add(in3); list.add(in4); list.add(in5); return list; } public Inner getById(Integer id){ List<Inner> list = getTrees(); for (Inner inner : list) { if(id==inner.getId()){ Inner in=inner; return in; } } return null; } public List<Inner> getChilds(Integer id){ List<Inner> list = getTrees(); List<Inner> result =new ArrayList<OmRequestImpl.Inner>(); for (Inner inner : list) { if(id.intValue()==inner.getpId().intValue()){ result.add(inner); } } return result; }更多關于ztree控件的內容，請參考專題《jQuery插件ztree使用匯總》
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
