jQuery树插件zTree使用方法详解


Posted in jQuery onMay 02, 2017

最近要做一个树结构,就使用了jQuery 的树插件,感觉还不错,做个随笔

页面的基本结构是这样的

jQuery树插件zTree使用方法详解

这里的样式是使用了metroStyle文件夹里的类bootstrap风格,当然首先需要下载ztree插件,直接百度即可,下载完成后由对应的api和一些例子,这里使用的是复选框模板

jQuery  zTree树的下载链接

页面jsp如下:

<html> 
<head> 
 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
 <title> ZTREE DEMO - checkbox</title> 
 <link rel="stylesheet" href="/css/demo.css" rel="external nofollow" > 
 <link rel="stylesheet" href="/css/metroStyle.css" rel="external nofollow" > 
 <script type="text/javascript" src="/js/jquery-3.2.1.js"></script> 
 <script type="text/javascript" src="/js/jquery.ztree.core.js"></script> 
 <script type="text/javascript" src="/js/jquery.ztree.excheck.js"></script> 
  
 <script type="text/javascript" src="/js/jquery.ztree.exedit.js"></script> 
 
 <script type="text/javascript"> 
  var setting = { 
   check: { 
    enable: true 
   }, 
   data: { 
    simpleData: { 
     enable: true 
    } 
   }, 
   callback:{ 
    onCheck:onCheck 
   } 
  }; 
 
//  var zNodes =[ 
//   { id:1, pId:0, name:"随意勾选 1", open:true}, 
//   { id:11, pId:1, name:"随意勾选 1-1", open:false}, 
//   { id:111, pId:11, name:"随意勾选 1-1-1"}, 
//   { id:112, pId:11, name:"随意勾选 1-1-2"}, 
//   { id:12, pId:1, name:"随意勾选 1-2", open:false}, 
//   { id:121, pId:12, name:"随意勾选 1-2-1"}, 
//   { id:122, pId:12, name:"随意勾选 1-2-2"}, 
//   { id:2, pId:0, name:"随意勾选 2", checked:false, open:false}, 
//   { id:21, pId:2, name:"随意勾选 2-1"}, 
//   { id:22, pId:2, name:"随意勾选 2-2", open:false}, 
//   { id:221, pId:22, name:"随意勾选 2-2-1", checked:false}, 
//   { id:222, pId:22, name:"随意勾选 2-2-2"}, 
//   { id:23, pId:2, name:"随意勾选 2-3"}, 
    
    
//   { id:3, pId:0, name:"随意勾选 3", checked:false, open:false}, 
//   { id:231, pId:3, name:"随意勾选 3-1"}, 
//   { id:232, pId:3, name:"随意勾选 3-2", open:false}, 
//   { id:2321, pId:232, name:"随意勾选 3-2-1", checked:false}, 
//   { id:2322, pId:232, name:"随意勾选 3-2-2"}, 
//   { id:233, pId:3, name:"随意勾选 3-3"} 
    
//  ]; 
   
  var code; 
   
  function setCheck() { 
   var zTree = $.fn.zTree.getZTreeObj("treeDemo"), 
   py = $("#py").attr("checked")? "p":"", 
   sy = $("#sy").attr("checked")? "s":"", 
   pn = $("#pn").attr("checked")? "p":"", 
   sn = $("#sn").attr("checked")? "s":"", 
   type = { "Y":py + sy, "N":pn + sn}; 
   zTree.setting.check.chkboxType = type; 
//   showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };'); 
//   showCode('setting.check.chkboxType = { "Y" : "", "N" : "" };'); 
   showCode('setting.check.chkboxType = { "Y" : "s", "N" : "ps" };'); 
    
//   setting.check.chkboxType = { "Y" : "", "N" : "" }; 
  } 
  function showCode(str) { 
   if (!code) code = $("#code"); 
   code.empty(); 
   code.append("<li>"+str+"</li>"); 
  } 
   
  var zNodes =[]; 
  $(document).ready(function(){ 
   var t = $("#treeDemo"); 
   $.ajax({ 
    type: "POST", 
    url: "/Units/ListTree", 
    dataType: 'json', 
    success: function(result) { 
     console.log(result); 
     $.extend( true, zNodes, result ); 
     console.log(zNodes); 
      t = $.fn.zTree.init(t, setting, zNodes); 
//     demoIframe = $("#testIframe"); 
    } 
   }); 
  }); 
   
  $(document).ready(function(){ 
   $.fn.zTree.init($("#treeDemo"), setting, zNodes); 
   setCheck(); 
   $("#py").bind("change", setCheck); 
   $("#sy").bind("change", setCheck); 
   $("#pn").bind("change", setCheck); 
   $("#sn").bind("change", setCheck); 
    
  }); 
   
  function onCheck(e,treeId,treeNode){ 
   var treeObj=$.fn.zTree.getZTreeObj("treeDemo"), 
   nodes=treeObj.getCheckedNodes(true), 
   v=""; 
   for(var i=0;i<nodes.length;i++){ 
   v+=nodes[i].name + ","; 
   alert(nodes[i].id); //获取选中节点的值 
   } 
  } 
   
     
 </script> 
</head> 
 
<body> 
 <div class="tree" style="margin-left: 534px;background: #316ac5;width: 0px;"> 
  <ul id="treeDemo" class="ztree" style="background: white;height: inherit;margin-top: 295px;"></ul> 
 </div> 
   <input type="checkbox" id="py" class="checkbox first" checked style="display:none;" /> 
   <input type="checkbox" id="sy" class="checkbox first" checked style="display:none;"/> 
   <input type="checkbox" id="pn" class="checkbox first" checked style="display:none;"/> 
   <input type="checkbox" id="sn" class="checkbox first" checked style="display:none;"/> 
       
</body> 
</html>

上面的死数据替换为后台赋予的值,用的是ajax方式,当然后台需要用json方式进行交互
java代码控制器代码如下:

@Controller 
@RequestMapping("/Units") 
public class UnitsController{ 
 
 
 @Autowired 
 private UnitsService unitsService; 
  
  
  
 @RequestMapping("/ListTree") 
 @ResponseBody 
 public List<JSONObject> ListTree(){ 
   
  List<JSONObject> jsonList = new ArrayList<JSONObject>(); 
  List<Units> zTreeAll = unitsService.zTreeAll(); 
   
  for (Units units : zTreeAll) { 
   JSONObject json = new JSONObject(); 
//   { id:1, pId:0, name:"随意勾选 1", open:false} 
   if(units.getUnitsId() == units.getNodeData()){ 
     
     
    JSONObject json1 = new JSONObject(); 
     
    json1.put("id", units.getUnitsId()); 
    json1.put("pId", 0); 
    json1.put("name", units.getUnitsName()); 
    json1.put("open", false); 
     
    jsonList.add(json1); 
     
    json.put("id", -1); 
    json.put("pId", units.getNodeData()); 
    json.put("name", units.getSectorName()); 
    json.put("open", false); 
     
   }else{ 
     
    json.put("id", units.getUnitsId()); 
    json.put("pId", units.getNodeData()); 
    json.put("name", units.getSectorName()); 
    json.put("open", false); 
     
   } 
    
   jsonList.add(json); 
    
  } 
// for (JSONObject units : jsonList) { 
   
//  System.out.println(jsonList.toString()); 
   
// } 
   
   
  return jsonList; 
 } 
}

这样就可以实现所需要的树结构,ztree树是可以无限扩展的,就按照个人所需,来选择模板就可以了

jsp中的这段代码是获得当前选择值得id

function onCheck(e,treeId,treeNode){ 
   var treeObj=$.fn.zTree.getZTreeObj("treeDemo"), 
   nodes=treeObj.getCheckedNodes(true), 
   v=""; 
   for(var i=0;i<nodes.length;i++){ 
   v+=nodes[i].name + ","; 
   alert(nodes[i].id); //获取选中节点的值 
   } 
  }

以上就是使用ztree的基本方法,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
JQuery判断正整数整理小结
Aug 21 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
详解jQuery的核心函数和事件处理
Feb 18 jQuery
jQuery Tree Multiselect使用详解
May 02 #jQuery
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 #jQuery
jQuery实现按比例缩放图片的方法
Apr 29 #jQuery
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 #jQuery
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 #jQuery
jQuery设置图片等比例缩小的方法
Apr 29 #jQuery
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 #jQuery
You might like
PHP 面向对象程序设计(oop)学习笔记 (五) - PHP 命名空间
2014/06/12 PHP
浅谈PHP的反射机制
2016/12/15 PHP
ThinkPHP3.1.x修改成功与失败跳转页面的方法
2017/09/29 PHP
Javascript开发包大全整理
2006/12/22 Javascript
javascript中input中readonly和disabled区别介绍
2012/10/23 Javascript
jquery 提示信息显示后自动消失的具体实现
2013/12/18 Javascript
js图片自动轮播代码分享(js图片轮播)
2014/05/06 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
2014/06/16 Javascript
javascript+canvas实现刮刮卡抽奖效果
2015/07/29 Javascript
js面向对象的写法
2016/02/19 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
2017/01/04 Javascript
Bootstrap 手风琴菜单的实现代码
2017/01/20 Javascript
解决微信二次分享不显示摘要和图片的问题
2017/08/18 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
Layer弹出层动态获取数据的方法
2018/08/20 Javascript
webpack4+react多页面架构的实现
2018/10/25 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
详解Django之auth模块(用户认证)
2018/04/17 Python
python实现自动发送报警监控邮件
2018/06/21 Python
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
Python函数的参数常见分类与用法实例详解
2019/03/30 Python
一篇文章了解Python中常见的序列化操作
2019/06/20 Python
python3字符串操作总结
2019/07/24 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
Python进行特征提取的示例代码
2020/10/15 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
基层党员群众路线教育实践活动个人对照检查材料思想汇报
2014/10/05 职场文书
社区文明创建工作总结2015
2015/04/21 职场文书
节约用电通知
2015/04/25 职场文书
离婚民事起诉状
2015/08/03 职场文书
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技
css让页脚保持在底部位置的四种方案
2022/07/23 HTML / CSS