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 append与appendTo方法比较
May 24 jQuery
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
详解jQuery中的easyui
Sep 02 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
详解jquery和vue对比
Apr 16 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 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的大小写敏感问题整理
2011/12/29 PHP
PHP SPL标准库之文件操作(SplFileInfo和SplFileObject)实例
2015/05/11 PHP
PHP查找与搜索数组元素方法总结
2015/06/12 PHP
javascript 单例/单体模式(Singleton)
2011/04/07 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
jquery动画1.加载指示器
2012/08/24 Javascript
js实现页面转发功能示例代码
2013/08/05 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
Javascript获取图片原始宽度和高度的方法详解
2016/09/20 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
2017/01/10 Javascript
深入理解angular2启动项目步骤
2017/07/15 Javascript
基于JS实现简单滑块拼图游戏
2019/10/12 Javascript
python如何实现excel数据添加到mongodb
2015/07/30 Python
Python生成器以及应用实例解析
2018/02/08 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
对Python中创建进程的两种方式以及进程池详解
2019/01/14 Python
Python3 requests文件下载 期间显示文件信息和下载进度代码实例
2019/08/16 Python
pytorch下大型数据集(大型图片)的导入方式
2020/01/08 Python
Python yield生成器和return对比代码实例
2020/04/20 Python
Jupyter Notebook 实现正常显示中文和负号
2020/04/24 Python
Python urllib3软件包的使用说明
2020/11/18 Python
美国运动鞋类和服装零售连锁店:Shoe Palace
2019/08/13 全球购物
以下的初始化有什么区别
2013/12/16 面试题
学校岗位设置方案
2014/01/16 职场文书
告诉你怎样写创业计划书
2014/01/27 职场文书
数控技术应用个人求职信范文
2014/02/03 职场文书
新手上路标语
2014/06/20 职场文书
音乐课外活动总结
2015/05/09 职场文书
2015年副班长工作总结
2015/05/15 职场文书
感恩主题班会教案
2015/08/12 职场文书
高中班主任寄语
2019/06/21 职场文书
Python Socket编程详解
2021/04/25 Python