jQuery ztree实现动态树形多选菜单
我用到的版本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使用汇总》
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
jQuery实现提交表单时不提交隐藏div中input的方法
这篇文章主要介绍了jQuery实现提交表单时不提交隐藏div中input的方法,结合实例形式分析了通过设置input的disabled属性实现隐藏input提交的操作技巧,需要的朋友可以参考下2019-10-10开发插件的两个方法jquery.fn.extend与jquery.extend
jQuery为开发插件提拱了两个方法,分别是jquery.fn.extend与jquery.extend,接下来就为大家介绍下两者的具体使用2013-11-11
最新评论