jQuery ztree实现动态树形多选菜单
网络编程 2021-07-04 20:00www.168986.cn编程入门
这篇文章主要介绍了jQuery ztree实现动态树形多选菜单,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-: 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, suess: 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,正式的直接从数据库中获取。狼蚁网站SEO优化是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控件的内容,请参考专题
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程