ztree的添加、修改、删除及前后台交互
一、引入资源
下载并引入ztree的相关js,css和img等。http://www.treejs.cn/v3/api.php
ztree的核心代码jquery.ztree.core.js
ztree关于选中的代码jquery.ztree.excheck.js(如果有复选框引入)
ztree关于是否可编辑的代码jquery.exedit.js(允许修改节点时引入)
二、初始化ztree
1、页面中创建tree需要显示的载体dom
2、设置ztree的基本配置参数 setting
// zTree 的参数配置,深入使用请参考 API 文档(setting 配置详解)
var setting = {
//是否允许编辑节点
edit: {
enable: true,
editNameSelectAll: true,
showRemoveBtn: true,
removeTitle: "删除节点",
showRenameBtn: true,
renameTitle: "编辑节点"
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeRemove: beforeRemove, //移除前
beforeRename: beforeRename, //重命名前
//onRemove: onRemove,
onRename: onRename,
beforeDrag:beforeDrag,
onClick: zTreeOnClick //注册节点的点击事件
},
view: {
selectedMulti: false,
addHoverDom: addHoverDom, //移入节点显示编辑按钮
removeHoverDom: removeHoverDom //移入节点显示编辑按钮
},
};
3、获取节点初始数据,并初始化ztree
ztree支持的数据结构,可查看官网文档。
//获取部门tree数据
function loadTree() {
$.ajax({
type: 'POST',
contentType: '',
url: "",
data: {},
timeout: 1000, //超时时间设置,单位毫秒
dataType: 'json',
success: function (res) {
zNodes = []; //初始化ztree
for (var i = 0; i < res.length; i++) {
var data = res[i]
zNodes.push({
'id': data.id,
'pId': data.pId,
'name': data.name,
'open': false
});
}
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes); //初始化ztree
}
}) } $(document).ready(function () {
loadTree()
});
三、配置增删改方法
添加:
在节点下添加新节点信息
1、首先在setting的callback中,设置addHoverDom方法,鼠标移入节点时,显示编辑按钮;在setting的edit中也需要设置显示编辑按钮。
2、
//鼠标移入节点,显示编辑按钮
function addHoverDom(treeId, treeNode) { //treeNode是当前hover的节点信息
var sObj = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
+ "' title='添加节点' οnfοcus='this.blur();'></span>";
sObj.after(addStr);
var btn = $("#addBtn_" + treeNode.tId); //判断该部门下是否有人员,用于删除节点时,当节点下有信息,禁止删除。
var data1 = {
"id": treeNode.id,
"pageNumber": currentPageNumber,
"pageSize": currentPageSize
};
$.ajax({
type: 'POST',
url: "",
data: data1,
timeout: 1000, //超时时间设置,单位毫秒
dataType: 'json',
success: function (res) {
//console.log(res);
if(res.flag == 0){
var datalist = res.data.list;
if(datalist.length==0){
hasMember = false;
}else{
hasMember = true;
}
} }
});
//当点击添加按钮时:
if (btn) btn.bind("click", function () {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
console.log(treeNode.id);
var name = "新部门" + (newCount++);
var newNode;
//发送请求保存一个新建的节点,后台返回ID,用返回的ID新增节点
var data = {
"code": treeNode.id,
"name": name
};
$.ajax({
type: 'post',
url: "",
data: data,
timeout: 1000, //超时时间设置,单位毫秒
dataType: 'json',
success: function (res) {
console.log(res)
if (res.flag == 0 ) {
var newId = res.data;
//在树节点上增加节点
newNode = zTree.addNodes(treeNode, {id: newId, pId: treeNode.id, name: name});
zTree.editName(newNode[0]) //新增的节点进入编辑状态
}
}
});
return false;
});
}
添加新的根节点
流程与上述方法类似,只是在树节点之外增加一个新增根节点按钮,并添加上对应的方法
//添加根节点
$('.addnode').click(function () {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
nodes = zTree.getNodes();
console.log(nodes) var name = "新部门" + (newCount++);
var newNode;
//发送请求保存一个新建的节点,根据返回ID添加新节点
var data = {
"code": 0,
"name": name
};
$.ajax({
type: 'post',
url: "",
data: data,
timeout: 1000, //超时时间设置,单位毫秒
dataType: 'json',
success: function (res) {
console.log(res)
if (res.flag == 0) {
var newId = res.data;
newNode = zTree.addNodes(null, {id: newId, pId: null, name: name});
zTree.editName(newNode[0]); //新增后显示编辑状态
}
}
});
});
修改
重命名修改
1、重命名之前的判空,在beforeRename函数中判断
//重命名之前的判断
function beforeRename(treeId, treeNode, newName) {
if (newName.length == 0) {
layer.msg("节点名称不能为空.");
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
setTimeout(function () {
zTree.editName(treeNode)
}, 10);
return false;
}
return true;
}
2、重命名的前后台交互
//修改节点信息
function onRename(event, treeId, treeNode, isCancel) {
if (isCancel) {
return;
}
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var onodes = zTree.getNodes()
console.log(onodes);
//发送请求修改节点信息
var data = {
"id": treeNode.id,
"code": treeNode.pId, //父节点
"name": treeNode.name,
};
$.ajax({
type: 'post',
url: "",
data: data,
timeout: 1000, //超时时间设置,单位毫秒
dataType: 'json',
success: function (res) {
layer.msg(res.msg)
}
});
}
删除
需求:
删除前需要二次确认;
当节点下有子节点时,禁止删除改节点;
当节点下有对应的其他信息时,禁止删除;
//删除之前的判断
function beforeRemove(treeId, treeNode) {
var data = {
"id": treeNode.id
};
className = (className === "dark" ? "" : "dark"); if(treeNode.isParent){
layer.alert('该节点下有子节点,不能删除');
return false;
} if(hasMember){
layer.alert('该部门下有人员,不能删除');
return false;
}
var oFlag = confirm("确认删除 节点 -- " + treeNode.name + " 吗?");
if(oFlag){
$.ajax({
type: 'post',
url: "",
data: data,
timeout: 1000, //超时时间设置,单位毫秒
dataType: 'json',
success: function (res) {
console.log(res)
if (res.flag == 0) {
layer.msg(res.msg)
return true;
}else {
layer.msg(res.msg);
return false;
}
}
})
}else{
return false
}
}
其他
鼠标移出时,隐藏编辑按钮
function removeHoverDom(treeId, treeNode) {
$("#addBtn_" + treeNode.tId).unbind().remove();
};
禁止节点之前的拖拽
function beforeDrag(){
return false; //禁止所有拖拽功能
}
点击节点的事件
//当点击节点
function zTreeOnClick(event, treeId, treeNode) {
//alert(treeNode.tId + ", " + treeNode.name);
//这里根据节点ID获取对应信息或进行对应的操作
}
ztree的添加、修改、删除及前后台交互的更多相关文章
- JavaWeb_day03_员工信息添加修改删除
day03员工的添加,修改,删除 修改功能 思路 : 点击修改员工数据之后,跳转到单行文本,查询要修改的员工id的全部信息,主键id设置为readonly,其余的都可以修改, 修改之后,提交按钮,提交 ...
- Web 1三级联动 下拉框 2添加修改删除 弹框
Web 三级联动 下拉框 using System; using System.Collections.Generic; using System.Linq; using System.Web; u ...
- 打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3):用户添加/修改/删除 vue表格组件 vue分页组件
第三章 建议学习时间8小时 总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章] 演示地址:后台:demo ...
- SpringBoot定时任务升级篇(动态添加修改删除定时任务)
需求缘起:在发布了<Spring Boot定时任务升级篇>之后得到不少反馈,其中有一个反馈就是如何动态添加修改删除定时任务?那么我们一起看看具体怎么实现,先看下本节大纲: (1)思路说明: ...
- 【转】C#添加修改删除文件文件夹大全
[转]C#添加修改删除文件文件夹大全 C#添加修改删除文件文件夹大全 StreamWriter sw = File.AppendText(Server.MapPath(".")+& ...
- oracle 表字段添加 修改 删除语法
修改列名 alter table 表明 rename column rename 老列名 to 新列名添加 字段alter table 表名 add(字段名 类型):删除字段alter table 表 ...
- EF简单的添加修改删除基本语法
using ( androidhiveEntities db = new androidhiveEntities() ) { #re ...
- thinkphp 添加 修改删除
在 MainController.class.php 添加 public function zhuCe() { //时间两个逻辑 // 1 显示页面 2向数据库添加 if(empty($_POST)) ...
- MySQL 字段常用操作 添加,修改,删除,调整字段顺序
整理备忘: 添加字段:alter table 表名Add column 字段名 字段类型 默认值 AFTER 字段名 (在哪个字段后面添加) 例子: alter table appstore_sou ...
随机推荐
- 10-排序5 PAT Judge (25 分)
The ranklist of PAT is generated from the status list, which shows the scores of the submissions. Th ...
- 09-排序2 Insert or Merge (25 分)
According to Wikipedia: Insertion sort iterates, consuming one input element each repetition, and gr ...
- [转帖]k8s 部署问题解决
k8s 部署问题解决 https://www.jianshu.com/p/f53650a85131 本文记录一下在部署 k8s 时遇到的一些问题及解决方法,具体部署流程可以参考 ubuntu 安装 k ...
- .net平台下对C#代码的编译
最近赶项目忽然想到一个问题,那就是在 .Net平台下的C#代码是怎么从源代码到机器可以识别的电脑的(只怪自己上学不好好读书,现在又要重补一遍了!!!) 话不多说直接上调研结果: 预习知识: 1: IL ...
- c#异步方法调用
var t1 = new Task(() => GkeyTest()); DisplaylistboxMSG("初始化:" + t1.Status.ToString()); ...
- Tigase XMPP Server
Tigase XMPP Server是我们的旗舰服务器端软件,提供XMPP服务或实例通信(IC)服务.最基本的解释是Tigase是一个聊天服务器,但它远不止于此.聊天是其可能的应用程序之一,但任何类型 ...
- CodeForces 955D Scissors
昨晚CF比赛比较颓,今天有心情写题解就不错了QWQ 洛谷题目页面传送门 & CodeForces题目页面传送门 给定字符串\(a,b,|a|=n,|b|=m\),求是否可以在\(a\)中选\( ...
- python基础2--if,while,for,逻辑运算
1.1 条件控制语句 1.if - elif - else 2.常用操作运算符 < > >= <= == != 3.if elif 后面一定要有条件 else后面没有条件 1 ...
- jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒子(重要),jq操作滚动条
jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒 ...
- axios + vue导出excel文件
(使用到了elementUI框架) <template> <el-button type="primary" size="mini" @cli ...