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 相关文章推荐
javascript Excel操作知识点
Apr 24 Javascript
jquery 双色表格实现代码
Dec 08 Javascript
filters.revealTrans.Transition使用方法小结
Aug 19 Javascript
学习并汇集javascript匿名函数
Nov 25 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
Jan 27 Javascript
javascript代码运行不出来执行错误的可能情况整理
Oct 18 Javascript
javascript弹出页面回传值的方法
Jan 28 Javascript
Vue.js实战之Vuex的入门教程
Apr 01 Javascript
Echarts基本用法_动力节点Java学院整理
Aug 11 Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 Javascript
解决vue.js提交数组时出现数组下标的问题
Nov 05 Javascript
JavaScript中如何调用Java方法
Sep 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
C# Assembly类访问程序集信息
2009/06/13 PHP
PHP加密解密实例分析
2015/12/25 PHP
PHP模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
Yii统计不同类型邮箱数量的方法
2016/10/18 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
JavaScript中的函数(二)
2015/12/23 Javascript
jQuery 监控键盘一段时间没输入
2016/04/22 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
2016/08/25 Javascript
jQuery基本过滤选择器用法示例
2016/09/09 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
js 输入框 正则表达式(菜鸟必看教程)
2017/02/19 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
2018/07/28 Javascript
在vue项目中引入高德地图及其UI组件的方法
2018/09/04 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
2018/10/10 Javascript
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
[01:33:14]LGD vs VP Supermajor 败者组决赛 BO3 第二场 6.10
2018/07/04 DOTA
python创建和删除目录的方法
2015/04/29 Python
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
用Python去除图像的黑色或白色背景实例
2019/12/12 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
浙大网新C/C++面试解惑
2015/05/27 面试题
网络公司美工设计工作个人的自我评价
2013/11/03 职场文书
表扬信格式
2014/01/12 职场文书
给分销商的致歉信
2014/01/14 职场文书
启迪人心的励志语录:脾气永远不要大于本事
2020/01/02 职场文书
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python
Android开发之底部导航栏的快速实现
2022/04/28 Java/Android