相关阅读:
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将节点数据提交给Server端例子: 将页面的节点ID遍历解析成字符串形式提交到后台。 文件分为MyEclipse项目ztest.rar和war包。 war包tomcat下运行,打开http://localhost:8080/ztest测试。 开发环境: MyEclipse...
二,异步加载使用关键,还是在setting参数上等级:访问量: 3万积分: 484排名: 10万博主最新文章ZTree学习(一):一般使用,一载数据oracle
zTree工具,其中包括中文和英文的API,案例演示,异步加载大数据时非常有用。
ztree工具类应用
ztree树,带复选框,右键增加,修改,删除节点可连接后台。针对ztree进行了小小修改。完美运行兼容性好。支持火狐,谷歌,IE10.
ztree树界节点删除,移动 利用ztree插件对树节点进行删除,移动
本文实例讲述了js树插件zTree获取所有选中节点数据的方法。分享给大家供大家参考。具体分析如下: 由于刚接触Tree方面的东西。在网上看到了zTree,是中国人写的。所以API肯定是中文的。而且评论也很好。所以尝试用...
ztree实现左右两棵树的节点移动,左边移动到右边,在右边树上添加节点,左边树上删除节点,右移左,逻辑一致
解决ztree添加节点不显示问题
ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网ztree官网...
该资源原理说明与博客《异步&同步加载树节点----zTree(一)》相一致。
获取ztree节点数据
jquery-zTree插件引用的工具包
ztree根据文本内筛选叶子节,并改变叶子节点字体颜色,注意例子不是bak备份html,含Ztree需要的js控件。
ztree插件前台和后台数据交互,后台用的是java语言,用的技术是java
jQuery Tree插件---- zTree 上一个版本:3.5.46 捐赠给zTree : : zTree API: : zTree演示: : 安装npm install @ztree/ztree_v3zTree简介zTree是一个多功能的“树插件”。 基于jQuery。 zTree的主要优点包括出色...
最近项目中有一个比较大型的树节点加载,网上面也看过一些解决方案,感觉都不是很好,也有很多误区,比如单击节点时加载子节点,导致节点重复添加。ztree fileter方法是在每次展开时都会执行,所以根据不同的请求...
在ztree节点后面加了个复选下拉框,打开demo/cn/index.html,点击组合功能演示-radio_checkbox_mulitselect 共存节点看效果
var zTree = $.fn.zTree.getZTreeObj("treeDemo"), type = { "Y":'ps', "N":'ps'}; zTree.setting.check.chkboxType = type; }); function aa(){ var treeObj=$.fn.zTree.getZTreeObj("treeDemo"); ...