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


Posted in Javascript onAugust 12, 2016

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
浅析jQuery中常用的元素查找方法总结
Jul 04 Javascript
jquery.cookie实现的客户端购物车操作实例
Dec 24 Javascript
两行代码轻松搞定JavaScript日期验证
Aug 03 Javascript
利用vue-router实现二级菜单内容转换
Nov 30 Javascript
bootstrap模态框远程示例代码分享
May 22 Javascript
js调用设备摄像头的方法
Jul 19 Javascript
详解如何在微信小程序中愉快地使用sass
Jul 30 Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 Javascript
vue中实现Monaco Editor自定义提示功能
Jul 05 Javascript
javascript面向对象三大特征之多态实例详解
Jul 24 Javascript
微信小程序开发摇一摇功能
Nov 22 Javascript
js DOM的事件常见操作实例详解
Dec 16 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
Aug 12 #Javascript
jquery插件uploadify多图上传功能实现代码
Aug 12 #Javascript
Javascript中的对象和原型(二)
Aug 12 #Javascript
JavaScript中的对象和原型(一)
Aug 12 #Javascript
JavaScript中对象的不同创建方法
Aug 12 #Javascript
酷! 不同风格页面布局幻灯片特效js实现
Feb 19 #Javascript
JS+CSS3模拟溢出滚动效果
Aug 12 #Javascript
You might like
PHP新手上路(九)
2006/10/09 PHP
PHP整数取余返回负数的相关解决方法
2014/05/15 PHP
详解PHP导入导出CSV文件
2014/11/03 PHP
PHP基于phpqrcode生成带LOGO图像的二维码实例
2015/07/10 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
Laravel6.2中用于用户登录的新密码确认流程详解
2019/10/16 PHP
用javascript来实现动画导航效果的代码
2007/12/16 Javascript
AJAX 网页保留浏览器前进后退等功能
2011/02/12 Javascript
设置checkbox为只读(readOnly)的两种方式
2013/10/11 Javascript
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
JS三级可折叠菜单实现方法
2016/02/29 Javascript
关于RequireJS的简单介绍即使用方法
2016/10/20 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
JavaScript中undefined和null的区别
2017/05/03 Javascript
backbone简介_动力节点Java学院整理
2017/07/14 Javascript
JS实现移动端判断上拉和下滑功能
2017/08/07 Javascript
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
详解js动态获取浏览器或页面等容器的宽高
2019/03/13 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
Python写的PHPMyAdmin暴力破解工具代码
2014/08/06 Python
python中实现php的var_dump函数功能
2015/01/21 Python
Python检测网络延迟的代码
2018/05/15 Python
Python从Excel中读取日期一列的方法
2018/11/28 Python
pycharm创建一个python包方法图解
2019/04/10 Python
python3.6根据m3u8下载mp4视频
2019/06/17 Python
什么是python的列表推导式
2020/05/26 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
jupyter notebook更换皮肤主题的实现
2021/01/07 Python
《孔子游春》教学反思
2014/02/25 职场文书
社团活动总结范文
2014/04/26 职场文书
教师师德表现自我评价
2015/03/05 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python
nginx+lua单机上万并发的实现
2021/05/31 Servers
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis