相关阅读:
X-admin2.2中switch开关的监听,以及属性值获取和更改状态等操作
Spring Boot集成X-admin2.2时,Layui字体图标无法正常显示或乱码问题解决方法
Spring Boot 踩坑系列之Error resolving template
Maven项目中引入net.sf.json.JSONObject依赖jar包
最近在基于Spring Boot+X-admin2.2(LayUi)+framemark开源一个后台管理系统,其中部门管理部分需要使用属性菜单,整理一下ZTree的使用工具类,供大家参考。
有需要功能完整代码的可以添加右侧公众号“十点数据”获取。
代码如下:
var ZTreeUtils = {};
(function(ZTreeUtils) {
var nodeId = null;// 当前点击节点的ID
var nodeName = null;// 当前点击节点的名称
var addNodeUrl = null;// 添加节点时调用的后台URL;
var delNodeUrl = null;// 删除节点时调用的URL;
var treeId = null;// 当前操作的树标签的ID属性值;
var table = null;
var tableIdValue = null;
ZTreeUtils.tree = function(nodeUrl, adNodeUrl, deNodeUrl, treeId,
tableObject, tableId) {
table = tableObject
tableIdValue = tableId
addNodeUrl = adNodeUrl;
delNodeUrl = deNodeUrl;
treeId = treeId;
var setting = {
view : {
selectedMulti : false
},
check : {
enable : false
},
data : {
simpleData : {
enable : true
}
},
edit : {
enable : false
},
callback : {
onClick : ZTreeUtils.onClick
}
};
var result = Ajaxget.excute(nodeUrl, false, null, false);
$(document).ready(function() {
$.fn.zTree.init($("#" + treeId), setting, result.data);
});
}
//点击节点
ZTreeUtils.onClick = function(e, treeId, treeNode) {
nodeId = treeNode.id;
nodeName = treeNode.name;
("#nodeId").val(nodeId);
table.reload(tableIdValue, { // 此处是上文提到的 初始化标识id
where : {
nodeId : nodeId
}
});
}
// 添加节点;
ZTreeUtils.addNode = function() {
if (ZTreeUtils.isClick()) {
xadmin.open('新增节点', addNodeUrl + "?id=0" + "&parentId=" + nodeId,
700, 305);
}
}
// 编辑节点;
ZTreeUtils.editNode = function() {
// addNodeUrl:后台请求URL;
if (ZTreeUtils.isClick()) {
xadmin.open('编辑[' + nodeName + ']节点', addNodeUrl + "?id=" + nodeId
+ "&parentId=0", 700, 305);
}
}
// 删除一个节点;
ZTreeUtils.delNode = function() {
// delNodeUrl:后台请求URL;
var ids = [];
if (ZTreeUtils.isClick()) {
ids.push($("#nodeId").val());
layer.confirm('确认要删除[' + nodeName + ']节点吗?', function(index) {
data = {};
data["id"] = ids.join(',');// 数组转为字符串;
result = Ajaxget.excute(delNodeUrl, false, data, true)// 发同步请求,把数据提交给后台;
if (result['sucess'] == "true" || result['sucess'] == true) {// 发异步删除数据
window.location.reload();// 刷新当前页面
layer.msg('已删除[' + nodeName + ']节点!', {
icon : 1,
time : 2000
});
}
});
}
}
ZTreeUtils.isClick = function() {
var nodeId = ("#nodeId").val();
if (nodeId == null || nodeId == "" || nodeId == undefined) {
layer.msg("请选择所要处理的部门节点 ", {
icon : 6,
time : 2000
});
return false;
} else {
return true;
}
}
})(ZTreeUtils);
Ajax提交工具类代码如下:
var Ajaxget = {};
(function(Ajaxget) {
Ajaxget.excute = function(url, async, values, toJson) {
console.log(url);
console.log(values);
var data = {};
$.ajax({
type : "GET",
async : async,// 要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为false。注意,同步请求将锁住浏览器,用户其他操作必须等待请求完成才可以执行。
url : url,
data : values,
dataType : "json",
success : function(result) {
// $('#resText').empty(); // 清空resText里面的所有内容
data = result;
console.log(data);
},
error : function(result) {
data = result;
console.log(data);
}
});
if (toJson == true)// 将json字符串格式化为json对象
data = JSON.parse(data);
return data;
};
})(Ajaxget);
最后效果如下图:
具有功能如下:
1:树节点的添加、编辑和删除;
2:点击树节点时,刷新右侧用户列表;
3:右侧用户列表中数据的新增、编辑、删除等;
4:用户的查询、导出、打印等;
相关推荐
zTree工具类主要针对zTree进行了一系列的封装和优化,旨在简化开发流程,提高开发效率。在处理大数据量的异步加载场景下,zTree表现尤为出色。 1. **zTree的基本概念** - **节点(Node)**:zTree中的基本单位,每...
在用户选中节点后,可以使用这些组件显示一个包含编辑表单的窗口,用于编辑节点信息。为了与ZTree交互,我们需要在弹出层中嵌入相应的表单控件,并绑定事件处理函数,以便在用户提交更改时更新ZTree的节点数据。 4....
在本项目中,我们关注的是ZTree的一个特定实现,即带有复选框的树形结构,用户可以通过右键菜单对节点进行增加、修改和删除操作,并且这些操作能够实时与后台服务器进行交互。 一、ZTree简介 ZTree是一个基于...
这个文件是使用ZTree时必不可少的,它包含了节点的添加、删除、修改、展开、折叠等操作,以及事件监听和处理等核心功能。 2. `jquery.ztree.excheck.js` 或 `jquery.ztree.exedit.js`:这两个文件是ZTree的扩展功能...
1. **节点操作**:添加、删除、编辑、展开与折叠节点,这些操作都可通过API进行控制,实现对树形结构的动态管理。 2. **多级节点**:支持无限层级的节点结构,能够展示复杂的组织关系或层级数据。 3. **节点状态...
1. 数据格式不匹配:确保服务器返回的数据符合 ZTree 预期的格式,包括 `idKey`, `pIdKey` 和 `name` 等字段。 2. 加载速度慢:优化服务器端的查询效率,或者考虑分页加载,减少一次性获取的数据量。 3. 回调函数未...
ztree将节点数据提交给Server端例子: 将页面的节点ID遍历解析成字符串形式提交到后台。 文件分为MyEclipse项目ztest.rar和war包。 war包tomcat下运行,打开http://localhost:8080/ztest测试。 开发环境: MyEclipse...
在这个"ztree工具类应用"中,我们将深入探讨ZTree的核心功能、使用方法以及常见应用场景。 1. **ZTree的基本结构** ZTree的基础是HTML中的`<ul>`和`<li>`元素,通过JavaScript和CSS进行动态渲染,形成具有层级关系...
- 左移右:当用户选择左侧树的一个节点并将其移动到右侧时,我们需要在后台处理这个动作,将该节点从左侧树的数据源中删除,并在右侧树的数据源中新增这个节点。同时,ZTree提供了事件监听机制,我们可以监听`...
以上就是关于"zTree后台组装树结构java代码"的主题知识,包括了zTree的使用、Java与MySQL的交互、递归算法构建树、Spring JDBC等内容。理解并掌握这些知识点,能够帮助开发者高效地构建基于zTree的树形界面。
提供的`.chm`文件是zTree的官方帮助文档,包含了详细的API介绍、示例代码以及常见问题解答,是学习和使用zTree的重要参考资料。通过阅读此文档,开发者可以更好地理解和运用zTree的各种功能,解决实际开发中遇到的...
每个节点都包含一系列属性,如`checked`(是否被选中)、`click`(点击事件)、`icon`(图标)、`isParent`(是否为父节点)、`nodes`(子节点列表)等,这些属性使得树节点具备了丰富的交互性和扩展性。 #### 方法...
3. **修改节点**:通过`editNode()`方法可以编辑节点的属性,如名称、图标等。编辑时可能需要触发异步操作,例如保存修改到服务器。 4. **查找节点**:ZTree提供`searchNode()`方法进行关键字搜索,可以快速定位到...
ZTree的编辑功能包括节点文本的修改、拖拽节点调整层级以及添加、删除节点。`setting.edit.drag`和`setting.edit.rename`分别控制拖拽和重命名功能。添加节点通常通过调用`treeObj.addNodes()`实现,删除节点则使用...
这段代码定义了一个名为`.ztree li span.button.add`的新CSS类,其中包含了必要的样式属性。这些样式属性包括了`margin`、`background-position`和`vertical-align`等,这些都是控制新添加节点外观的关键因素。 ###...
ztree树界节点删除,移动 利用ztree插件对树节点进行删除,移动
3. **节点操作**:提供了添加、编辑、删除、展开、折叠等丰富的节点操作功能,便于用户进行数据管理。 4. **事件监听**:通过绑定各种事件,如点击、双击、展开/折叠等,可以实现复杂的业务逻辑。 5. **图标支持**:...
ZTree是由JSON数据驱动的,每个节点包含了id、name、pId等属性,用于定义节点的层级关系和显示信息。叶子节点通常指的是没有子节点的节点,它们通常是数据的终端。 在"ztree根据文本内筛选叶子节,并改变叶子节点...
EasyUI和ZTree是两个在Web开发中常用的前端框架,尤其在...通过以上知识点的学习和应用,开发者可以快速构建出一个功能完善的后台管理系统,同时也能深入理解EasyUI和ZTree这两个工具的使用,提升自身的Web开发技能。
本文将深入探讨“jQuery ZTree 根目录只能够添加一级目录,子节点添加新的节点到当前节点下方”这一特定问题,并提供相关的解决方案。 首先,ZTree的核心功能是展示和操作树形数据,它支持多级节点、拖拽排序、异步...