树节点增删改查:
前台jsp页面:
<%
String root=request.getContextPath();//获取项目目录
%>

<SCRIPT type="text/javascript">
var setting = {
async: {
enable: true,
url:"<%=root%>/book/cat/list.do",
autoParam:["id", "name=n", "level=lv"],
otherParam:{"otherParam":"zTreeAsyncTest"}
},
view: {
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
selectedMulti: false
},
check: {
enable: true
},
data: {
simpleData: {
enable: true
}
},
edit: {
enable: true,
},
callback: {
onRemove: onRemove, //移除事件
onRename: onRename //修改事件
}
}; $(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting);
}); 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='add node' οnfοcus='this.blur();'></span>";
sObj.after(addStr);
var btn = $("#addBtn_"+treeNode.tId);
var name = "new Node";
if (btn) btn.bind("click", function(){
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
$.post('<%=root%>/book/cat/add.do?pId='+treeNode.id+'&nodeName='+name,function (data) {
var newID = data; //获取新添加的节点Id
zTree.addNodes(treeNode, {id:newID, pId:treeNode.id, name:name}); //页面上添加节点
var node = zTree.getNodeByParam("id", newID, null); //根据新的id找到新添加的节点
zTree.selectNode(node); //让新添加的节点处于选中状态
});
});
};
function onRemove(e, treeId, treeNode) {
var onRe = confirm("确认删除 节点 -- " + treeNode.name + " 吗?");
//需要对删除做判定或者其它操作,在这里写~~
if (onRe){
$.post('<%=root%>/book/cat/del.do?nodeId='+treeNode.id);
console.log(treeNode.id);
}
}
function onRename(e, id, treeNode, isCancel) {
//需要对名字做判定的,可以来这里写~~
if (treeNode.name.length == 0) {
alert("节点名称不能为空.");
return false;
}
console.log(treeNode.id);
$.post('<%=root%>/book/cat/edit.do?nodeId='+treeNode.id+'&nodeName='+treeNode.name);
}
function removeHoverDom(treeId, treeNode) {
$("#addBtn_"+treeNode.tId).unbind().remove();
};
</SCRIPT>

Ztree树节点应用的更多相关文章

  1. 转:zTree树控件扩展篇:巧用zTree控件实现文本框输入关键词自动模糊查找zTree树节点实现模糊匹配下拉选择效果

    是否可以借助于zTree实现文本框输入关键词自动模糊匹配zTree下拉树,然后选择下拉树内节点显示在文本框内且隐藏下拉树. 看到这个需求脑子里头大致已经想到了要如何实现这样一个需求,当时是限于时间问题 ...

  2. 转:zTree树控件key配置之title:zTree树节点名称过长如何省略显示且鼠标移入节点上能够显示全称

    当树节点的名称有些很长时,全部显示出来显得很拥挤的情况下,我们会想到用省略节点名称来代替,当鼠标移入节点时能够显示该节点的全称.这样我们应该如何做呢? 首先,我们要在树的节点内多增加一个属性用于设置该 ...

  3. 如何自定义修改ztree树节点的图标

    1.此种情况是针对后对数据没有不好判断谁是父节点和子节点的问题 ztree默认的树节点,父子节点的图标不大好看,修改图片只需要在数据的地方添加icon的键,值就是图片的相对位置,但是问题就是需要区分是 ...

  4. ztree树节点重叠问题

    使用zTree时,由于同时使用了bootstrap插件,导致样式起了冲突,生成的树都挤在一起了, 最后的解决办法是设置zTreeStyle.css文件的.ztree li ul{}属性,在里面加入he ...

  5. 转:zTree树控件实战篇:针对多个下拉加载zTree树应该如何做出合理的配置

    今天有一个zTree的朋友遇到一个非常棘手的问题,才研究zTree树控件两天就被上头催着看成果,很是苦恼.他面对的问题就是页面内多个地方需要下拉在其文本框下方加载zTree树,由于对zTree下拉加载 ...

  6. ztree树 叶子节点路径的集合

    1.Question Description: ztree树各个节点都带有路径,如“/根节点”,"/根节点/一级节点",“根节点/一级节点/二级节点‘; 现在想获取所选的最末级节点 ...

  7. 使用zTree和json构建简单树节点

    我们经常碰到须要构建树结构展示的情况,我推荐使用zTree和JSON. 比如: <? php /** * * 使用zTree和json构建树节点 * */ $arr = array( 0=> ...

  8. zTree实现删除树节点

    zTree实现删除树节点 1.实现源码 <!DOCTYPE html> <html> <head> <title>zTree实现基本树</titl ...

  9. ztree异步加载树节点

    参考文档:https://www.cnblogs.com/tenWood/p/8620708.html ztree api地址:http://www.treejs.cn/v3/api.php 说明:j ...

随机推荐

  1. 小程序开发-使用xpath解析网页html中的数据

    最新有个微信小程序的开发需求,需要从网页中提取一些元素信息,获取有效数据 1. 了解到微信小程序里面不能直接操作dom元素,所以我们需要使用一些其他的npm包 2. 经过查到各方面的文档,最新决定用x ...

  2. javascript事件环微任务和宏任务队列原理

    哈喽!大家好!我是木瓜太香,我又来嘞,今天来说说前端面试中经常别问到的 JS 事件环问题. JS 事件环 JS 程序的运行是离不开事件环机制的,这个机制保证在发生某些事情的时候我们有机会执行一个我们事 ...

  3. JAVA JDK 环境变量配置 入门详解 - 精简归纳

    JAVA JDK 环境变量配置 入门详解 - 精简归纳 JERRY_Z. ~ 2020 / 9 / 13 转载请注明出处!️ 目录 JAVA JDK 环境变量配置 入门详解 - 精简归纳 一.为什么j ...

  4. 解压gzip格式文件(包括网页)

    先上源码 参数说名: - source :gzip格式流内容. - len: gzip流长度 - dest: 解压后字符流指针 - gzip: 压缩标志,非0时解压gzip格式,否则按照zip解压 说 ...

  5. 第2课 - 搭建Lua开发环境

    第2课 - 搭建Lua开发环境 1. Lua 的优点 (1)Lua 使用标准的 ANSI C 进行开发,可以无缝集成到宿主程序,且几乎支持所有平台. (2)Lua 是开源且免费的软件,以源码的方式直接 ...

  6. 使用阿里云OSS的服务端签名后直传功能

    网站一般都会有上传功能,而对象存储服务oss是一个很好的选择.可以快速的搭建起自己的上传文件功能. 该文章以使用阿里云的OSS功能为例,记录如何在客户端使用阿里云的对象存储服务. 服务端签名后直传 背 ...

  7. Vue中你忽略的点

    自定义组件使用 v-model <my-component v-model="data"></my-component> 在组件my-component中, ...

  8. Anaconda简介及特点

    摘要 Python是一种面向对象的解释型计算机程序设计语言,其使用,具有跨平台的特点,可以在Linux.macOS以及Windows系统中搭建环境并使用,其编写的代码在不同平台上运行时,几乎不需要做较 ...

  9. LR Robust Stereo VIO for Fast Autonomous Flight

    Abstract 我们展示说我们的Stereo MSCKF在算力上跟state-of-the-art的单目方案是可比的, 而且提供了很大的鲁棒性. 1. Introduction 贡献 第一个开源的f ...

  10. 搜索引擎学习(二)Lucene创建索引

    PS:需要用到的jar包: 代码实现 1.工程结构 2.设置工程依赖的jar包 3.代码实现 /** * Lucene入门 * 创建索引 */ public class CreateIndex { / ...