zTree节点增删改
效果:
完成增删改,要注意几个关键点:
- 使用 编辑功能,必须设置 setting.edit 中的各个属性
- 使用 编辑功能的事件回调函数,必须设置 setting.callback.beforeRemove / onRemove / beforeRename / onRename 等属性
- zTree 不提供默认的增加按钮,如要实现需要利用自定义控件的方法 addHoverDom / removeHoverDom
- 我们利用 beforeEditName 来触发自定义的编辑操作
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>zTree测试</title><link rel="stylesheet" type="text/css" href="css/demo.css" /><link rel="stylesheet" type="text/css" href="css/zTreeStyle/zTreeStyle.css" /><script src="js/jquery-1.4.4.min.js" type="text/javascript" charset="utf-8"></script><script src="js/jquery.ztree.all.js" type="text/javascript" charset="utf-8"></script></head><script type="text/javascript">var zTree;var setting = {view:{addHoverDom:addHoverDom,removeHoverDom:removeHoverDom,selectedMulti:false},edit: {enable: true,editNameSelectAll:true,removeTitle:'删除',renameTitle:'重命名'},data: {/* keep:{parent:true,leaf:true}, */simpleData: {enable: true}},callback:{beforeRemove:beforeRemove,//点击删除时触发,用来提示用户是否确定删除(可以根据返回值 true|false 确定是否可以删除)beforeEditName: beforeEditName,//点击编辑时触发,用来判断该节点是否能编辑beforeRename:beforeRename,//编辑结束时触发,用来验证输入的数据是否符合要求(也是根据返回值 true|false 确定是否可以编辑完成)onRemove:onRemove,//(beforeRemove返回true之后可以进行onRemove)删除节点后触发,用户后台操作onRename:onRename,//编辑后触发,用于操作后台beforeDrag:beforeDrag,//用户禁止拖动节点onClick:clickNode//点击节点触发的事件}};var zNodes =[{ id:1, pId:0, name:"父节点 1", open:true},{ id:11, pId:1, name:"去百度",url:'http://www.baidu.com',target:'_blank'},{ id:12, pId:1, name:"叶子节点 1-2"},{ id:13, pId:1, name:"叶子节点 1-3"},{ id:2, pId:0, name:"父节点 2", open:true},{ id:21, pId:2, name:"叶子节点 2-1"},{ id:22, pId:2, name:"叶子节点 2-2"},{ id:23, pId:2, name:"叶子节点 2-3"},{ id:3, pId:0, name:"父节点 3", open:true},{ id:31, pId:3, name:"叶子节点 3-1"},{ id:32, pId:3, name:"叶子节点 3-2"},{ id:33, pId:3, name:"叶子节点 3-3"}];$(document).ready(function(){zTree = $.fn.zTree.init($("#tree"), setting, zNodes);});function beforeRemove(e,treeId,treeNode){return confirm("你确定要删除吗?");}function onRemove(e,treeId,treeNode){if(treeNode.isParent){var childNodes = zTree.removeChildNodes(treeNode);var paramsArray = new Array();for(var i = 0; i < childNodes.length; i++){paramsArray.push(childNodes[i].id);}alert("删除父节点的id为:"+treeNode.id+"\r\n他的孩子节点有:"+paramsArray.join(","));return;}alert("你点击要删除的节点的名称为:"+treeNode.name+"\r\n"+"节点id为:"+treeNode.id);}function beforeEditName(treeId,treeNode){/* if(treeNode.isParent){alert("不准编辑非叶子节点!");return false;} */return true;}function beforeRename(treeId,treeNode,newName,isCancel){if(newName.length < 3){alert("名称不能少于3个字符!");return false;}return true;}function onRename(e,treeId,treeNode,isCancel){alert("修改节点的id为:"+treeNode.id+"\n修改后的名称为:"+treeNode.name);}function clickNode(e,treeId,treeNode){if(treeNode.id == 11){location.href=treeNode.url;}else{alert("节点名称:"+treeNode.name+"\n节点id:"+treeNode.id);}}function beforeDrag(treeId,treeNodes){return false;}var newCount = 1;function addHoverDom(treeId,treeNode){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='添加子节点' onfocus='this.blur();'></span>";sObj.after(addStr);var btn = $("#addBtn_"+treeNode.tId);if (btn) btn.bind("click", function(){//在这里向后台发送请求保存一个新建的叶子节点,父id为treeNode.id,让后将下面的100+newCount换成返回的id//zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"新建节点" + (newCount++)});alert("开始添加节点")return false;});}function removeHoverDom(treeId,treeNode){$("#addBtn_"+treeNode.tId).unbind().remove();}</script>
<body><ul id="tree" class="ztree"></ul>
</body>
</html>
完整的与后台交互的例子
/***********S QLQ*********************/
var zTree;
var setting = {view : {addHoverDom : addHoverDom,removeHoverDom : removeHoverDom,selectedMulti : false},edit : {enable : true,editNameSelectAll : true,removeTitle : '删除',renameTitle : '重命名'},data : {key : {name:"typeName"},/* keep:{parent:true,leaf:true}, */simpleData : {enable : true,idKey: "typeId",pIdKey: "upId",rootPId: 1}},callback : {beforeRemove : beforeRemove,//点击删除时触发,用来提示用户是否确定删除beforeEditName : beforeEditName,//点击编辑时触发,用来判断该节点是否能编辑,是否进入编辑状态beforeRename : beforeRename,//编辑结束时触发,用来验证输入的数据是否符合要求onRemove : onRemove,//删除节点后触发,用户后台操作onRename : onRename,//编辑后触发,用于操作后台onClick : clickNode//点击节点触发的事件}
};
function geneTypeTree(){$.getJSON(contextPath+"/trainacontentType_getTraincontenttypeTree.action",function(response){var zNodes = response.traincontenttypeTree;zTree = $.fn.zTree.init($("#tree"),setting,zNodes);});
}$(document).ready(function() {geneTypeTree();});/******S 删除*******/
function beforeRemove(treeId, treeNode) {if(confirm("确认删除?\n将会删除下面的所有视频!")){if(treeNode.isParent){alert("该目录下面还有子目录,请从最底层目录开始删除!");return false;}return true;}return false;
}
function onRemove(e, treeId,treeNode) {var typeId = treeNode.typeId;$.post(contextPath+"/trainacontentType_deleteTrainContentTypeById.action",{"typeId":typeId},function(repsonse){alert(repsonse.result);if("删除成功"==repsonse.result)//删除成功之后执行查询btnFindFy();},'json')}
/******E 删除*******/function beforeEditName(treeId,treeNode) {/* if(treeNode.isParent){alert("不准编辑非叶子节点!");return false;} */return true;
}function beforeRename(treeId,treeNode, newName,isCancel) {if (newName.length < 3) {alert("名称不能少于3个字符!");return false;}return true;
}
function onRename(e, treeId,treeNode, isCancel) {if(confirm("您确认修改类别名称?")){$.post(contextPath+"/trainacontentType_updateTraincontenttypeName.action",{"traincontenttype.typeid":treeNode.typeId,"traincontenttype.typename":treeNode.typeName},function(response){if(response != null){if("修改成功"==response.result){alert(response.result);}}},'json');}
}/************S 点击事件*********/
function clickNode(e, treeId,treeNode) {$("#trainContentTypeId").val(treeNode.typeId);//向隐藏的类别编号赋值$("[name='typeId']").val(treeNode.typeId);//向隐藏的类别编号赋值$("#yeHao").val("1");btnFindFy();
}
/************E 点击事件*********/function addHoverDom(treeId,treeNode) {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='添加子节点' onfocus='this.blur();'></span>";sObj.after(addStr);var btn = $("#addBtn_"+ treeNode.tId);if (btn)btn.bind("click",function() {if(confirm("确认在该目录下面添加培训内容类别?")){var typeName = prompt("请输入类别名称");//获取到的名字if(typeName != null){//点击确定if(typeName.length>1){var upId = treeNode.typeId;//上级编号$.post(contextPath+"/trainacontentType_addTraincontenttype.action",{"traincontenttype.upid":upId,"traincontenttype.typename":typeName},function(response){if(response!=null){alert(response.result);}if(response.result == "添加成功" ){var traincontenttype = response.traincontenttype;//获取返回来的数据zTree.addNodes(treeNode, {typeId:traincontenttype.typeid, upId:treeNode.id, typeName:typeName});}
// geneTypeTree();},'json');}else{alert("请输入正确的类别名称")}}}//在这里向后台发送请求保存一个新建的叶子节点,父id为treeNode.id,让后将下面的100+newCount换成返回的id//zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"新建节点" + (newCount++)});return false;});
}
function removeHoverDom(treeId,treeNode) {$("#addBtn_" + treeNode.tId).unbind().remove();
}
zTree节点增删改相关推荐
- ztree java 增删改_Ztree实现增删改查
1.和另一篇文章--[TreeGrid 实现增删改查]前面的内容一致,只需要创建一个html页面,命名为ztree-01.html,粘贴如下网址的代码进入ztree-01.html. 访问http:/ ...
- Curator基本操作(Zookeeper节点增删改查)
Curator是Zookeeper的Java客户端库,官网为 https://curator.apache.org . 环境 Ubuntu 22.04 Zookeeper 3.7.1 JDK 17.0 ...
- JS DOM节点增删改查 属性设置
一.节点操作 增 createElement(name)创建元素 appendChild();将元素添加 删 获得要删除的元素 获得它的父元素 使用removeChild()方法删除 改 第一种方式: ...
- ZooKeeper【基础 02】zookeeper-3.6.0 常用Shell命令(节点增删改查+监听器+四字指令)
我使用的安装文件是 apache-zookeeper-3.6.0-bin.tar.gz ,以下内容均以此版本进行说明.这个是官网的3.6.0<CLI命令说明> 感兴趣的可以查看. 1.1 ...
- ZooKeeper【基础知识 02】zookeeper-3.6.0 常用Shell命令(节点增删改查+监听器+四字指令)
我使用的安装文件是 apache-zookeeper-3.6.0-bin.tar.gz ,以下内容均以此版本进行说明.这个是官网的3.6.0<CLI命令说明> 感兴趣的可以查看. 1.1 ...
- 自定义 RPC框架3——JAVA实现Zookeeper节点增删改查
Zookeeper安装 zookeeper的安装在之前的文章中已经写过:https://blog.csdn.net/qq_45587153/article/details/123630361?spm= ...
- 【ztree系列】节点的增删改
一直以来,项目中用到的树形结构,都是用来读取显示数据.或者控制页面上其它内容的展示.对于树数据源的修改,一般由其它模块来完成,这样可以让功能单一化,不必让树的职责过多,但是却不得不再多加一步了.为了给 ...
- 可编辑树Ztree的使用(包括对后台数据库的增删改查)
找了很多网上关于Ztree的例子和代码才搞定. 首先,关于Ztree的代码不介绍了,网上下载之后,引用下列四个文件就能使用了. 1.关于配置选项.主要通过回调函数来实现向后台发送数据,实现增删改查. ...
- 带头节点单链表的增删改查
单链表有很多结构循环单链表,有头节点的单链表,无头节点的单链表,双节点单链表,以下源码是以有一个头节点的单链表为例写的增删改查的各种功能,就是下图 然后各个注释也在函数后面写着,这玩意确实还挺难,源码 ...
最新文章
- MySQL学习笔记之启动停止与登录,显示相关信息
- oracle 隐藏视图定义,【学习笔记】show hidden parameter 创建查看隐藏参数视图
- java irowset行数,Java CloneableRecord.put方法代码示例
- 宏光MINI EV收割的年轻人,又被苏宁、小米、欧拉盯上了
- 简单地发布EJB程序的过程
- 线段树 B数据结构 牛客练习赛28
- docker 镜像命令
- GitHub上的私有仓库转换为共有仓库以及共有仓库转换为私有仓库
- 怎么获取连表查询的相同字段
- char强制类型转换为int_数据类型专题之三: char类型和类型转换
- 恒生ufx接口转变成CTP接口
- SAP中销售订单中的条件类型修改控制问题配置分析
- SwiftUI调用UIKit
- Blend for Visual Studio 概述
- Alex 的 Hadoop 菜鸟教程: 第10课 Hive 安装和使用教程
- [Python]等额本息房贷计算器
- Python笔记:利用pygame模块实现三原色颜色滚动条效果
- C语言中延迟作用,c语言delay的用法
- 成都市计算机大学排名,成都东软学院排名2021 四川排名第34全国排名第781
- 北京邮电大学2020-2022年各院研究生分专业报考录取情况
热门文章
- Graphviz样例之有限状态自动机
- 字符串算法 —— 两字符串相同的单词
- 中英文对照 —— 色彩的描述
- numpy 高阶函数 —— np.histogram
- TensorFlow 学习(一)—— tf.get_variable() vs tf.Variable(),tf.name_scope() vs tf.variable_scope()
- 开源库、jar包(要不要重新制造轮子)—— C/C++、Java、Python
- 从氨基酸到大分子(蛋白质、核酸)
- ExtDeprecationWarning: Importing flask.ext.bootstrap is deprecated, use flask_bootstrap instead.
- CentOS + PyCharm 环境下使用 LIBSVM(及 unresolved reference 问题的解决)
- OpenCV2 图像处理与计算机视觉(一)—— 去除一幅二值化图像中的椒盐噪声