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 相关文章推荐
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
jquery实现图片上传前本地预览
Apr 28 jQuery
jquery仿微信聊天界面
May 06 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
jQuery实现简单全选框
Sep 13 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
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
ASP和PHP都是可以删除自身的
2007/04/09 PHP
php图片加水印原理(超简单的实例代码)
2013/01/18 PHP
有关于PHP中常见数据类型的汇总分享
2014/01/06 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
php时间计算相关问题小结
2016/05/09 PHP
php生成无限栏目树
2017/03/16 PHP
PHP实现git部署的方法教程
2017/12/19 PHP
Yii 使用intervention/image拓展实现图像处理功能
2019/06/22 PHP
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
2013/07/10 Javascript
jQuery事件用法实例汇总
2014/08/29 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
2015/06/19 Javascript
mvc中form表单提交的三种方式(推荐)
2016/08/10 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
2017/01/24 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
2017/07/21 Javascript
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
vue-router的两种模式的区别
2019/05/30 Javascript
jQuery操作元素追加内容示例
2020/01/10 jQuery
[47:43]Alliance vs KG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
使用python实现省市三级菜单效果
2016/01/20 Python
解决Python 遍历字典时删除元素报异常的问题
2016/09/11 Python
python数据处理实战(必看篇)
2017/06/11 Python
我就是这样学习Python中的列表
2019/06/02 Python
python psutil模块使用方法解析
2019/08/01 Python
pymysql模块的操作实例
2019/12/17 Python
Python 内置变量和函数的查看及说明介绍
2019/12/25 Python
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
面向游戏玩家和书呆子的极客订阅盒:Loot Crate
2020/11/25 全球购物
如何写好建议书
2014/03/13 职场文书
广告学专业毕业生自荐信
2014/05/28 职场文书
办公室主任个人总结
2015/02/28 职场文书
苹果电脑mac os中货币符号快捷输入
2022/02/17 杂记