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 相关文章推荐
用JS判断IE版本的代码 超管用!
Aug 09 Javascript
jQuery将多条数据插入模态框的示例代码
Sep 25 Javascript
使用ajax+jqtransform实现动态加载select
Dec 01 Javascript
javascript实现的简单计时器
Jul 19 Javascript
学习使用bootstrap的modal和carousel
Dec 09 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 Javascript
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
vue左侧菜单,树形图递归实现代码
Aug 24 Javascript
微信小程序列表中item左滑删除功能
Nov 07 Javascript
jquery中为什么能用$操作
Jun 18 jQuery
JS array数组检测方式解析
May 19 Javascript
vue如何搭建多页面多系统应用
Jun 17 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中比较简单的导入phpmyadmin生成的sql文件的方法
2011/06/28 PHP
深入理解ob_flush和flush的区别(ob_flush()与flush()使用方法)
2013/02/06 PHP
php stream_get_meta_data返回值
2013/09/29 PHP
ThinkPHP模板中数组循环实例
2014/10/30 PHP
鼠标经过的文本框textbox变色
2009/05/21 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
javascript实现下拉提示选择框
2015/12/29 Javascript
javascript insertAfter()定义与用法示例
2016/07/25 Javascript
jstree的简单实例
2016/12/01 Javascript
AngularJS表单验证功能分析
2017/05/26 Javascript
详解vuejs之v-for列表渲染
2017/06/22 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
2018/11/29 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
2019/07/04 jQuery
python编写网页爬虫脚本并实现APScheduler调度
2014/07/28 Python
Python map和reduce函数用法示例
2015/02/26 Python
浅谈python import引入不同路径下的模块
2017/07/11 Python
python实现换位加密算法的示例
2018/10/14 Python
对Django 中request.get和request.post的区别详解
2019/08/12 Python
基于Python和C++实现删除链表的节点
2020/07/06 Python
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
2014/08/19 HTML / CSS
贝嫂喜欢的婴儿品牌,个性化的婴儿礼物:My 1st Years
2017/11/19 全球购物
百思买加拿大:Best Buy Canada
2018/03/20 全球购物
Juice Beauty官网:有机美容产品,护肤与化妆品
2020/06/13 全球购物
学习自我鉴定
2014/02/01 职场文书
市场营销个人求职信范文
2014/02/02 职场文书
学习2014年全国两会心得体会
2014/03/12 职场文书
课前三分钟演讲稿
2014/04/24 职场文书
班委竞选演讲稿
2014/04/28 职场文书
员工工作自我评价
2014/09/26 职场文书
2015年秋学期教研工作总结
2015/10/14 职场文书
2016年教师节慰问信
2015/12/01 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书
django 认证类配置实现
2021/11/11 Python
vue3种table表格选项个数的控制方法
2022/04/14 Vue.js