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 extend()详解及简单实例
May 06 jQuery
使用 jQuery 实现表单验证功能
Jul 05 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
jQuery实现简易QQ聊天框
Feb 10 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来实现网络服务
2009/09/15 PHP
什么情况下可以不写PHP的闭合标签“?&gt;”
2014/08/28 PHP
php中的观察者模式简单实例
2015/01/20 PHP
一些常用的Javascript函数
2006/12/22 Javascript
显示js对象所有属性和方法的函数
2009/10/16 Javascript
jquery设置控件位置的方法
2013/08/21 Javascript
js中的referrer返回上一页使用介绍
2013/09/26 Javascript
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
JS实现光滑展开合拢的菜单效果代码
2015/09/16 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
2016/09/02 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
2016/12/20 Javascript
jquery实现表单获取短信验证码代码
2017/03/13 Javascript
vue在使用ECharts时的异步更新和数据加载详解
2017/11/22 Javascript
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
详解npm 配置项registry修改为淘宝镜像
2018/09/07 Javascript
Angular Material Icon使用详解
2018/11/07 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
2019/09/10 Javascript
layui禁用侧边导航栏点击事件的解决方法
2019/09/25 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
2019/11/04 Javascript
vue视频播放暂停代码
2019/11/08 Javascript
js实现圆形显示鼠标单击位置
2020/02/11 Javascript
JavaScript forEach中return失效问题解决方案
2020/06/01 Javascript
JavaScript编码小技巧分享
2020/09/17 Javascript
python循环监控远程端口的方法
2015/03/14 Python
在Django中输出matplotlib生成的图片方法
2018/05/24 Python
对PyTorch torch.stack的实例讲解
2018/07/30 Python
浅谈python 导入模块和解决文件句柄找不到问题
2018/12/15 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
Python3爬虫关于识别点触点选验证码的实例讲解
2020/07/30 Python
什么是数据抽象
2016/11/26 面试题
2014年五一活动策划方案
2014/03/15 职场文书
医生见习报告范文
2014/11/03 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
英文版辞职信
2015/02/28 职场文书
小学见习报告
2015/06/23 职场文书
《去年的树》教学反思
2016/02/18 职场文书