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去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
jquery图片放大镜效果
Jun 23 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
jQuery创建折叠式菜单
Jun 15 jQuery
jquery实现聊天机器人
Feb 08 jQuery
jQuery实现本地存储
Dec 22 jQuery
jQuery实现穿梭框效果
Jan 19 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中copy on write写时复制机制介绍
2014/05/13 PHP
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
PHP导出带样式的Excel示例代码
2016/08/28 PHP
详解PHP的抽象类和抽象方法以及接口总结
2019/03/15 PHP
浅析jQuery的链式调用之each函数
2010/12/03 Javascript
写js时遇到的一些小问题
2010/12/06 Javascript
Jquery知识点二 jquery下对数组的操作
2011/01/15 Javascript
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
jquery实现的动态回到顶部特效代码
2015/10/28 Javascript
JavaScript判断按钮被点击的方法
2015/12/13 Javascript
常见的javascript跨域通信方法
2015/12/31 Javascript
Node.js读写文件之批量替换图片的实现方法
2016/09/07 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
2017/02/08 Javascript
JS中Swiper的使用和轮播图效果
2017/08/11 Javascript
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
Vue.js划分组件的方法
2017/10/29 Javascript
javascript按顺序加载运行js方法
2017/12/01 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
2019/01/19 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
你准备好迎接vue3.0了吗
2020/04/28 Javascript
微信小程序文章详情功能完整实例
2020/06/03 Javascript
Vue3配置axios跨域实现过程解析
2020/11/25 Vue.js
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python字符串格式化输出方法分析
2016/04/13 Python
python+flask实现API的方法
2018/11/21 Python
Django之创建引擎索引报错及解决详解
2019/07/17 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
StubHub墨西哥:购买和出售您的门票
2016/09/17 全球购物
薇姿法国官网:Vichy法国
2021/01/28 全球购物
预备党员介绍人意见
2015/06/01 职场文书
贷款工作证明模板
2015/06/12 职场文书
导游词之五台山
2019/10/11 职场文书
javaScript Array api梳理
2021/03/31 Javascript
Golang中channel的原理解读(推荐)
2021/10/16 Golang
python 管理系统实现mysql交互的示例代码
2021/12/06 Python