关于zTree的使用心得以及相关的JS技术总结

最新推荐文章于 2021-03-19 16:20:44 发布

YangSy_001

最新推荐文章于 2021-03-19 16:20:44 发布

阅读量2.4k

点赞数

分类专栏： JS技术文章标签： js jsp web javascript

本文链接：https://blog.csdn.net/y446948434/article/details/45100415

版权

本文介绍了如何在JSP页面中使用zTree生成树结构，并通过后台传递参数。内容涉及zTree的API理解、JS公共方法实现、异步加载数据及节点选择功能。在JSP中，通过后台传递的参数初始化zTree，并展示了相关的JS代码实现，包括人员初始化、添加和删除候选人等操作。整个过程详细解释了JSON数据转换、节点处理和事件回调函数的应用。

摘要由CSDN通过智能技术生成

首先关于zTree树的生成将它分成了两部分，一部分为公共的JS初始化部分，另一部分为具体的JSP页面，在JSP页面中放入具体的业务参数。

当然要先对zTree的官方API有一定的了解 http://www.ztree.me/v3/api.php

一、介绍JSP页面。

关于引用zTree官方提供的JS文件就不说了。这里我在JSP页面上通过后台传递过来一些特定的参数。

<%@ page language="java" contentType="text/html; charset=UTF-8" 
 pageEncoding="UTF-8"%> 
<!DOCTYPE html> 
<html lang="zh"> 
<head> 
<title></title> 
<%@include file="/WEB-INF/views/commons/common.jsp"%> 
<%@include file="/WEB-INF/views/commons/ztree.jsp"%> 
<%@include file="/WEB-INF/views/themes/bootstrap_theme.jsp"%> 
<script src="${JS_MODULES_PATH}/selectTree.js"  type="text/javascript"></script> 
</head> 
<script type="text/javascript">   
function initPersonTree(){ 
  //初始化人员 
  OsmApp.Tree.selectOsm({ 
  multi : false, 
  selectType : "checkbox", 
  data : $("#data").val(), 
  filter : $("#filter").val(), 
  base : $("#base").val(), 
  group : $("#group").val() 
  }); 
} 
</script> 
<body onload = ' initPersonTree();'> 
<input type="hidden" id='data' value="${data}"/> 
<input type="hidden" id='base' value="${list}"/> 
<input type="hidden" id='filter' value="${filter}"/> 
<input type="hidden" id='group' value="${group}"/> 
<div > 
<div class="tabs-header"> 
 <div title="" class="panel-body layout-body" style="padding: 2px 5px 5px; width: 196px; height: 376px;" data-options="region:'center',title:'待办人 | 任意选择'"> 
  <ul id="osmtree" class="ztree" style="display:block;"></ul> //这里是树的生成位置 
 </div> 
  
 <div title="" class="panel-body layout-body" style="padding: 2px 5px 5px; width: 196px; height: 376px;" data-options="region:'center',title:'待办人 | 任意选择'"> 
  <ul id="treeSelected" class="ztree" style="display:block;"></ul> //这里是选择好的候选人的生成位置 
 </div> 
</div>   
</body> 
</html>