我用到的版本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"> </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", 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; }
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持查字典教程网。
【jQuery ztree实现动态树形多选菜单】相关文章：