首页 > 编程 > JavaScript > 正文

jQuery ztree实现动态树形多选菜单

2019-11-20 09:15:06
字体:
来源:转载
供稿:网友

我用到的版本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使用汇总》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表