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

 更新时间:2016年08月12日 16:41:01   作者:ilovexiaou  
这篇文章主要介绍了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-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热气球动画半透明背景的后台登录界面代码分享

    jQuery热气球动画半透明背景的后台登录界面代码分享

    这篇文章主要介绍了jQuery实现热气球动画背景登录框,适合用于后台登陆界面设计,推荐给大家,有需要的小伙伴可以参考下。
    2015-08-08
  • jQuery获取动态生成的元素示例

    jQuery获取动态生成的元素示例

    页面上可以动态添加数据,比如table,点击按钮可以动态添加行,下面与大家分享下jQuery如何获取动态生成的元素
    2014-06-06
  • Expandable "Detail" Table Rows

    Expandable "Detail" Table Rows

    Expandable "Detail" Table Rows...
    2007-08-08
  • jQuery时间验证和转换为标准格式的时间格式

    jQuery时间验证和转换为标准格式的时间格式

    本篇文章主要介绍了jQuery时间验证和转换为标准格式的时间示例代码,具有一定的参考价值,有兴趣的可以了解一下。
    2017-03-03
  • jquery的 filter()方法使用教程

    jquery的 filter()方法使用教程

    filter() 方法返回符合一定条件的元素。该方法让您规定一个条件。不符合条件的元素将从选择中移除,符合条件的元素将被返回。这篇文章主要介绍了 jquery的 filter()方法使用,需要的朋友可以参考下
    2018-03-03
  • Jquery 数组操作大全个人总结

    Jquery 数组操作大全个人总结

    jQuery的数组处理,便捷,功能齐全. 最近的项目中用到的比较多,最近时间紧迫,今天抽了些时间回过头来看 jQuery中文文档顺便对jQuery数组做个总结
    2013-11-11
  • jquery实现最简单的滑动菜单效果代码

    jquery实现最简单的滑动菜单效果代码

    这篇文章主要介绍了jquery实现最简单的滑动菜单效果代码,涉及jQuery基于鼠标事件操作页面元素动态变换的基本技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • jQuery学习基础知识小结

    jQuery学习基础知识小结

    jQuery学习基础知识小结,刚开始学习jquery的朋友可以参考下。
    2010-11-11
  • jquery自定义组件实例详解

    jquery自定义组件实例详解

    这篇文章主要为大家详细介绍了jquery自定义组件实例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • jQuery插件分享之分页插件jqPagination

    jQuery插件分享之分页插件jqPagination

    jqPagination 是一个简单易用的轻量级 jQuery分页插件,其使用了 HTML5 和 CSS3 技术来实现。此插件提供了几个参数设置选项,通过简单的配置即可生成分页控件。此外,它的外观样式是可自定义的,扩展性很强。
    2014-06-06

最新评论