jquery树形插件zTree高级使用详解


Posted in jQuery onAugust 16, 2019

使用高级zTree进行对属性结构进行操作的时候,做好的方式是参考官网的API文档。

本文简单介绍下如何通过后台传递过来一个树形结构的树,并且通过页面进行加载。

【与后台交互步骤】1、编写页面,引入zTree相关插件;2、编写js脚本,设定树形结构的基本属性;3、编写zTree的PO对象;4、编写返回属性结构的方法(json格式返回);5、页面请求树。

1、引入zTree相关的插件:

<script type="text/javascript" src="<%=request.getContextPath() %>/resources/js/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" href="<%=request.getContextPath() %>/resources/bootstrap/3.3.4/css/bootstrap.min.css" > 
<script type="text/javascript" src="<%=request.getContextPath() %>/resources/bootstrap/3.3.4/js/bootstrap.min.js"></script>
 
<!-- 引入zTree相关的js/css文件 -->
<link rel="stylesheet" href="<%=request.getContextPath() %>/resources/ztree/zTreeStyle/zTreeStyle.css" >
<script type="text/javascript" src="<%=request.getContextPath() %>/resources/ztree/jquery.ztree.all.js"></script>

2、编写js脚本,设定树形结构的基本属性

// zTree 的参数配置,深入使用请参考 API 文档(setting 配置详解)
 var setting = {
 check:{
 enable: false,
 //autoCheckTrigger:true,
 //chkStyle:"none"
 },
 callback:{
 onClick:queryRoleByEmployee
 }
 };
function queryRoleByEmployee(event, treeId, treeNode){
 //console.info(treeNode.tId + ", " + treeNode.name + "," + treeNode.checked);
 //console.info("--------"+treeNode.isParent);
 if(treeNode.isParent == true){
 //将角色的树形结构清楚
 $.fn.zTree.destroy("roleTree");
 return ;
 }
 $.get('<%=request.getContextPath()%>/'+treeNode.objCode+'/role',{"coddd":treeNode.isParent},function(data){
 console.info(data);
 zTreeObj = $.fn.zTree.init($("#roleTree"), settingRole, data);
 });
 }

3、编写zTree的PO对象

public class DimsTree {
 
 //除了树本身的属性,还可以自定义属性.
private Object objCode;
 
 //树形结构展示的名称
 private String name;
 
 //是否打开属性
 private String open;
 
 //是否根节点
 private boolean isParent;
 
 //url
 private String url;
 
 //子节点
 private List<DimsTree> children;
 
 //是否被选中
 private boolean checked;
//省略gettings和settings方法
}

4、编写返回属性结构的方法(json格式返回)

@ResponseBody
 @RequestMapping(value="/user_role1")
 public List<DimsTree> userRole1(Model model){
 //宿舍信息Tree
 List<DimsTree> dimsTreeList = new ArrayList<DimsTree>();
 //加载用户信息列表,手链需要加载宿舍信息,将用户信息加入到宿舍信息中.
 List<Dormitory> dormitoiryList = dormitoryDao.list();
 for(Dormitory dorm: dormitoiryList){
 DimsTree dt = new DimsTree();
 dt.setName(dorm.getDormCode());
 dt.setParent(true);//根节点
 dt.setObjCode(dorm.getDormCode());
 dt.setChildren(employee2DimsTree(dorm));
 dimsTreeList.add(dt);
 }
 
 model.addAttribute(dimsTreeList);
 //加载角色信息列表,对已经选中的角色进行设置checked=true属性。
 //这个应该设置成异步加载的方式,根据不同的用户查询不同的角色信息.
 logger.info("-------------->"+dimsTreeList);
 return dimsTreeList;
// return "other/user_role";
 }
 
 /**
  * 根据宿舍,查询宿舍下的成员
  * @param dorm
  * @return
  */
 public List<DimsTree> employee2DimsTree(Dormitory dorm){
  //这个应该是在service层进行实现得 
  String sql = "select * from t_employee t where t.dorm_code = ?";
  logger.info("----------->查询人员宿舍信息参数:"+dorm.getDormCode());
  List<Employee> employeeList = employeeDao.listBySql(sql, new Object[]{dorm.getDormCode()});
  List<DimsTree> dimsTreeList = new ArrayList<DimsTree>();
  for(Employee ee : employeeList){
   DimsTree dt = new DimsTree();
   dt.setName(ee.geteName());
   dt.setParent(false);
   dt.setObjCode(ee.getUstcAccount());
   dimsTreeList.add(dt);
  }
  return dimsTreeList;
 }

5、页面请求树

$(document).ready(function(){
 $.get('<%=request.getContextPath()%>/user_role1', function(data){
  console.info(data);
  //zNodes = data;
  zTreeObj = $.fn.zTree.init($("#dormitoryTree"), setting, data);
 });
 //console.info($.fn.zTree.getZTreeObj("dormitoryTree"));
 //console.info(zTreeObj.getNodes());
 });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现简单的抽奖游戏
May 05 jQuery
jQuery返回定位插件详解
May 15 jQuery
jquery 一键复制到剪切板的实例
Sep 20 jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
JQuery事件委托原理与用法实例分析
May 13 jQuery
jQuery zTree树插件的使用教程
Aug 16 #jQuery
jQuery zTree插件快速实现目录树
Aug 16 #jQuery
jQuery zTree插件使用简单教程
Aug 16 #jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 #jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 #jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 #jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 #jQuery
You might like
在PHP里得到前天和昨天的日期的代码
2007/08/16 PHP
WordPress中限制非管理员用户在文章后只能评论一次
2015/12/31 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
javascript setTimeout和setInterval 的区别
2009/12/08 Javascript
JavaScript 读取元素的CSS信息的代码
2010/02/07 Javascript
使用javascript做的一个随机点名程序
2014/02/13 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
浅析jQuery Mobile的初始化事件
2015/12/03 Javascript
JavaScript交换两个变量值的七种解决方案
2016/12/01 Javascript
全面总结Javascript对数组对象的各种操作
2017/01/22 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
node文件批量重命名的方法示例
2017/10/23 Javascript
vue 项目build错误异常的解决方法
2019/04/22 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
2020/05/19 Javascript
Vuejs通过拖动改变元素宽度实现自适应
2020/09/02 Javascript
[02:44]DOTA2英雄基础教程 克林克兹
2014/01/15 DOTA
Python字符串匹配算法KMP实例
2015/07/18 Python
详解Python中映射类型(字典)操作符的概念和使用
2015/08/19 Python
python daemon守护进程实现
2016/08/27 Python
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
python中 logging的使用详解
2017/10/25 Python
python输出数组中指定元素的所有索引示例
2019/12/06 Python
Python函数基本使用原理详解
2020/03/19 Python
Python库skimage绘制二值图像代码实例
2020/04/10 Python
python中怎么表示空值
2020/06/19 Python
python3定位并识别图片验证码实现自动登录功能
2021/01/29 Python
用css3制作纸张效果(外翻卷角)
2013/02/01 HTML / CSS
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
Bibloo奥地利:购买女装、男装、童装、鞋和配件
2018/10/18 全球购物
希腊香水和化妆品购物网站:Parfimo.gr
2019/10/03 全球购物
教师简历自我评价
2014/02/03 职场文书
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
Python爬虫基础初探selenium
2021/05/31 Python
sql查询语句之平均分、最高最低分及排序语句
2022/05/30 MySQL
CSS使用Flex和Grid布局实现3D骰子
2022/08/05 HTML / CSS