1:引入样式及类库
<link rel="stylesheet"
href="${ctx}/resources/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<!-- jquery ztree -->
<script src="${ctx}/resources/ztree/js/jquery.ztree.all-3.3.js"></script>
2：
<!-- 右键菜单的样式 -->
<style type="text/css">
div#rMenu {
z-index: 4;
position: absolute;//使用绝对定位
width: 100px;
visibility: hidden;
top: 0;
background-color: #555;
padding: 1px;
}
div#rMenu ul {
margin: 0px;
padding: 0px;
}
div#rMenu ul li {
font-size: 12px;
line-height: 20px;
margin: 0px;
padding: 0px;
cursor: pointer;
list-style: none outside none;//取消样式
background-color: #DFDFDF;
border-bottom: 1px solid #fff;
padding-left: 3px;
}
div#rMenu ul li:hover {
background: #eee;
}
</style>
<body >
<div id="rMenu">
<ul>
<li id="m_add" onclick="menuAddNode();">增加节点</li>
<li id="m_edit" onclick="menuEditNode();">编辑节点</li>
<li id="m_editFile" onclick="menuEditContentNode();">编辑内容</li>
<li id="m_delete" onclick="menuDeleteNode();">删除节点</li>
</ul>
</div>
<div class="" style="border-radius:5px;overflow:auto;">
<ul id="treeDemo" class="ztree"></ul>
</div>
</body>
3：渲染
<script>
var setting = {
async : {
enable : true,//异步加载
url : "${ctx}/main/getMenuTreeData.do", //调用请求
autoParam : [ "id", "pid" ] //自动封装参数
},
callback : {
onRightClick : OnRightClick,//右键事件
onAsyncSuccess: onAsyncSuccess,//回调函数，在异步的时候，进行节点处理（有时间延迟的），后续章节处理
onClick : menuShowNode
}
};
function OnRightClick(event, treeId, treeNode) {
if (treeNode) {
var top = $(window).scrollTop();
zTree.selectNode(treeNode);
if (treeNode.getParentNode()) {
var isParent = treeNode.isParent;
if(isParent){//非叶子节点
showRMenu("firstNode", event.clientX, event.clientY+top);//处理位置，使用的是绝对位置
}else{//叶子节点
showRMenu("secondNode", event.clientX, event.clientY+top);
}
} else {
showRMenu("root", event.clientX, event.clientY+top);//根节点
}
}
}
function showRMenu(type, x, y) {
$("#rMenu ul").show();
if (type == "root") {
$("#m_add").show();
$("#m_edit").hide();
$("#m_editFile").hide();
$("#m_delete").hide();
} else if(type == "firstNode"){
$("#m_add").show();
$("#m_edit").show();
$("#m_editFile").hide();
$("#m_delete").show();
}else if(type == "secondNode"){
$("#m_add").hide();
$("#m_edit").show();
$("#m_editFile").show();
$("#m_delete").show();
}
rMenu.css({
"top" : y + "px",
"left" : x + "px",
"visibility" : "visible"
});
//在当前页面绑定 鼠标事件
$(document).bind("mousedown", onBodyMouseDown);
}
//事件触发 隐藏菜单
function onBodyMouseDown(event) {
if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0)) {
rMenu.css({
"visibility" : "hidden"
});
}
}
//隐式 隐藏右键菜单
function hideRMenu() {
if(rMenu){
rMenu.css({
"visibility" : "hidden"
});
}
//取消绑定
$(document).unbind("mousedown", onBodyMouseDown);
}
//异步加载完成
function onAsyncSuccess(event, treeId, treeNode, msg) {
}
//单击节点 显示节点
function menuShowNode() {
var node = zTree.getSelectedNodes()[0];
if (node) {
if(!node.isParent){
}
} else {
alert("未找到节点");
}
}
var rMenu;//右键菜单元素
var zNodes = [{
id : "0",
name : "根节点",
pId : "-1",
url1 : "",
icon : "${ctx}/images/menu_p.png",
isParent : true //是否是父节点，对象分组的时候，要进行设置
}];
$(document).ready(function() {
zTree = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
rMenu = $("#rMenu");
//展开根节点
expandNodes(zTree.getNodes());
});
//右键菜单 添加节点
function menuAddNode() {
//隐藏菜单
hideRMenu();
var node = zTree.getSelectedNodes()[0];
if (node) {
pId = node.id;
} else {
alert("未找到节点");
}
}
//右键菜单 编辑节点
function menuEditNode() {
hideRMenu();
var node = zTree.getSelectedNodes()[0];
if (node) {
} else {
alert("未找到节点");
}
}
//右键菜单 内容节点
function menuEditContentNode() {
hideRMenu();
var node = zTree.getSelectedNodes()[0];
if (node) {
} else {
alert("未找到节点");
}
}
//右键菜单删除节点
function menuDeleteNode() {
hideRMenu();
var node = zTree.getSelectedNodes()[0];
if (node) {
//easyUI 消息框
top.$.messager.confirm("删除节点下的所有信息","确定要删除此节点吗？", function (r) {
if (r) {
var id = node.getParentNode().id;
$.ajax({
url : node.id,
beforeSend:function(){
},
success : function(data) {
var msg = "删除成功";
if ($.trim(data) == "success") {
refreshNode(id);
//location.href = "about:blank";
} else {
msg = "删除失败";
}
top.$.messager.show({
showType:'fade',
showSpeed:2000,
msg:msg,
title:'删除操作',
timeout:1
});
}
});
}
});
} else {
alert("未找到节点");
}
}
//焦点
function focusNode(id) {
var node = zTree.getNodeByParam("id", id, null);
if (node) {
zTree.selectNode(node);
} else {
setTimeout(function() {
focusNode(id);
}, 10);
}
}
function expandNodes(nodes) {
zTree.expandNode(nodes[0], true, false, false);
}
//刷新节点
function refreshNode(id) {
var node = zTree.getNodeByParam("id", id, null);
if (node) {
zTree.reAsyncChildNodes(node, "refresh");
} else {
setTimeout(function() {
refreshNode(id);
}, 10);
}
}
//刷新父节点
function refreshParentNode(id) {
var node = zTree.getNodeByParam("id", id, null);
var pNode = node.getParentNode();
if (pNode) {
refreshNode(pNode.id);
} else {
refreshNode("0");
}
}
//为添加节点刷新
function refreshForAddNode(id) {
var node = zTree.getNodeByParam("id", id, null);
zTree.addNodes(node, {
id : "xx",
name : "new node"
});
zTree.reAsyncChildNodes(node, "refresh");
}
</script>
4：:渲染数据页面
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="/pages/public/TagLib.jsp"%>
[
<c:forEach items="${baseClassList}" var="tree" varStatus="index">
{
id:"${tree.id}",
name:"${tree.name}",
pId:"${tree.parentId}",
icon:"",
isParent:<c:if test="${tree.isLeaf == '1'}">false</c:if><c:if test="${tree.isLeaf != '1'}">true</c:if>
}
<c:if test="${(index.index+1)!=fn:length(baseClassList)}">,</c:if>
</c:forEach>
]
相关推荐
2. 初始化ZTree：设置ZTree的数据源和配置，例如节点数据、事件监听等。 3. 配置右键菜单：定义菜单项，可以包括文本、图标、关联的操作函数等。 4. 绑定事件：通过ZTree提供的API，监听节点的右键点击事件，并调用`...
ZTree不仅支持基本的树形展示，还提供了丰富的功能扩展，比如右键菜单，这正是我们今天要讨论的重点。在这个压缩包中，你将找到实现ZTree右键菜单所需的HTML、JavaScript（JS）和CSS文件。 首先，我们来理解一下...
1. **jQuery基础**：zTree是基于jQuery库构建的，因此理解jQuery的基本选择器、事件处理、DOM操作是使用zTree的前提。掌握jQuery可以简化JavaScript代码，提高开发效率。 2. **树形数据结构**：zTree的核心在于将...
- **zTree API**：包括初始化、操作节点、获取节点信息、设置节点状态等方法，帮助开发者灵活控制树形结构。 - **配置参数**：如`setting`对象，包含数据、视图、回调、其他设置等，可以根据需求调整。 4. **...
3. 使用JavaScript代码初始化树形菜单，根据插件文档进行配置。 4. 调整CSS样式以适应项目需求。 5. 利用插件提供的API进行事件监听和数据操作。 通过学习和掌握这些jQuery Tree插件，开发者可以提高前端开发效率，...
- 首先，初始化ZTree，配置搜索相关参数，如`searchObj`，其中可以包含自定义搜索函数。 - 其次，监听搜索框的输入事件，触发搜索功能。 - 在自定义搜索函数中，遍历所有节点，使用递归方式处理无限层级。 - 对...
通常会涉及到zTree的API函数，如`init.ztree`初始化zTree，`showMenu`显示右键菜单，`hideMenu`隐藏菜单等。 在实际应用中，zTree的右键菜单功能可以用于各种场景，如数据库管理、文件系统操作或任何需要树形结构并...
通过调用`$.fn.zTree.init()`方法，将数据绑定到对应的DOM元素上，初始化zTree实例。 4. **配置项**：zTree提供了一组丰富的配置项，如`view`, `data`, `edit`, `check`, `async`等，用于定制树的显示样式、数据源...
接着，在JavaScript中初始化zTree，通过配置对象设定各种参数。例如： ```html <ul id="treeDemo" class="ztree"> ``` ```javascript var setting = { view: { showLine: true, // 是否显示连接线 showIcon: ...
3. **初始化设置**：根据需求配置zTree的参数，如是否启用多选、异步加载等。 4. **绑定元素**：选择一个HTML元素作为树的容器，并调用zTree的初始化方法。 5. **事件监听**：注册事件监听器，如点击节点、拖放等，...
- `init(treeId, setting)`: 初始化zTree，treeId是树容器的ID，setting是配置对象。 - `addNode()`: 添加新节点，有同步和异步两种方式。 - `removeNode()`: 删除指定节点。 - `selectNode()`: 选择或取消选择...
6. **API接口**：提供了一系列的API接口，用于在运行时动态操作树，如zTree.init()初始化树，zTree.expandNode()展开节点，zTree.selectNode()选择节点等。 7. **CSS样式自定义**：支持自定义样式，可以通过修改或...
3. 初始化配置：设置zTree的初始化参数，包括节点数据、显示样式、行为设置等。 4. 调用zTree方法：使用`$.fn.zTree.init()`方法启动zTree，并传入之前准备好的DOM元素和配置对象。 5. 交互处理：通过zTree提供的API...
在实际使用时，你需要在HTML中引入Bootstrap和ZTree的相关文件，然后通过JavaScript初始化ZTree，并根据需求配置相应的参数。例如，你可以设置节点的展开方式、是否启用复选框、节点点击事件等。ZTree的API文档是...
除了基本功能外，zTree还支持扩展功能，例如拖拽排序、右键菜单、搜索功能等，开发者可以根据需求灵活使用。 **6. 示例资源** 在提供的资源中，`jQuery树形控件zTree使用小结_jquery_脚本之家.html`可能是一个详细...
3. **事件不响应**：确保事件绑定在zTree初始化完成之后执行。 4. **节点图标不显示**：确认CSS文件引入无误，且节点的`icon`属性设置正确。 zTree的使用涵盖了诸多细节，以上仅是基础介绍。要深入掌握zTree，还...
2. **初始化ZTree**：通过JavaScript调用`$.fn.zTree.init()`方法初始化ZTree，传入容器元素和配置对象。配置对象可以设置树的初始状态、节点的展开方式、异步加载等参数。 3. **节点显示**：ZTree会根据提供的JSON...
为了在项目中使用zTree，你需要将相应的JS和CSS文件引入到HTML页面中，然后初始化zTree并设置相关配置。通过调用提供的API，可以实现对树形结构的动态操作。同时，与后端数据接口配合，实现数据的动态加载和更新。 ...
1. **Demo**：zTree的官方示例代码，涵盖了各种基本和高级功能的实现，包括基本的树结构、多选模式、异步加载、拖拽操作、右键菜单等。通过查看和运行这些示例，你可以直观地了解如何配置和调用zTree的各种功能。 2...
通过下载并研究`zTree_v3-master`中的示例，你可以了解到如何初始化zTree、如何设置节点数据、如何绑定事件、如何实现异步加载以及如何自定义样式等关键知识点。此外，还可以学习到如何通过JavaScript动态操作zTree...