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 相关文章推荐
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
jQuery实现简单的手风琴效果
Apr 17 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
jQuery实现的上拉刷新功能组件示例
May 01 jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
jQuery实现全选按钮
Jan 01 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,ASP.JAVA,JAVA代码格式化工具整理
2010/06/15 PHP
CI框架给视图添加动态数据
2014/12/01 PHP
php通过array_unshift函数添加多个变量到数组前端的方法
2015/03/18 PHP
php截取指定2个字符之间字符串的方法
2015/04/15 PHP
PHP中strpos、strstr和stripos、stristr函数分析
2016/06/11 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
DOM下的节点属性和操作小结
2009/05/14 Javascript
JS 无限级 Select效果实现代码(json格式)
2011/08/30 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
jQuery标签编辑插件Tagit使用指南
2015/04/21 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
2015/11/17 Javascript
JS 日期与时间戮相互转化的简单实例
2016/06/22 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
2016/11/25 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
2016/12/13 Javascript
JS 实现banner图片轮播效果(鼠标事件)
2017/08/04 Javascript
VUE实现表单元素双向绑定(总结)
2017/08/08 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
微信小程序使用wxParse解析html的方法示例
2019/01/17 Javascript
实例详解vue中的$root和$parent
2019/04/29 Javascript
详解ES6 Promise的生命周期和创建
2019/08/18 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
2020/05/11 Javascript
javascript实现移动端轮播图
2020/12/09 Javascript
Python中asyncore异步模块的用法及实现httpclient的实例
2016/06/28 Python
python获取当前目录路径和上级路径的实例
2018/04/26 Python
深入了解Python 变量作用域
2020/07/24 Python
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
尤妮佳moony海外旗舰店:日本殿堂级纸尿裤品牌
2018/02/23 全球购物
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
雷曼兄弟的五金店:Lehman’s Hardware Store
2019/04/10 全球购物
护士优质服务演讲稿
2014/08/26 职场文书
法人代表证明书格式
2014/10/01 职场文书
给男朋友的道歉短信
2015/05/12 职场文书
陪护人员误工证明
2015/06/24 职场文书
申论不会写怎么办?教您掌握这6点思维和原则
2019/07/17 职场文书
MySQL中in和exists区别详解
2021/06/03 MySQL