Ztree树节点应用
树节点增删改查:
<%
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树节点应用的更多相关文章
- 转:zTree树控件扩展篇:巧用zTree控件实现文本框输入关键词自动模糊查找zTree树节点实现模糊匹配下拉选择效果
是否可以借助于zTree实现文本框输入关键词自动模糊匹配zTree下拉树,然后选择下拉树内节点显示在文本框内且隐藏下拉树. 看到这个需求脑子里头大致已经想到了要如何实现这样一个需求,当时是限于时间问题 ...
- 转:zTree树控件key配置之title:zTree树节点名称过长如何省略显示且鼠标移入节点上能够显示全称
当树节点的名称有些很长时,全部显示出来显得很拥挤的情况下,我们会想到用省略节点名称来代替,当鼠标移入节点时能够显示该节点的全称.这样我们应该如何做呢? 首先,我们要在树的节点内多增加一个属性用于设置该 ...
- 如何自定义修改ztree树节点的图标
1.此种情况是针对后对数据没有不好判断谁是父节点和子节点的问题 ztree默认的树节点,父子节点的图标不大好看,修改图片只需要在数据的地方添加icon的键,值就是图片的相对位置,但是问题就是需要区分是 ...
- ztree树节点重叠问题
使用zTree时,由于同时使用了bootstrap插件,导致样式起了冲突,生成的树都挤在一起了, 最后的解决办法是设置zTreeStyle.css文件的.ztree li ul{}属性,在里面加入he ...
- 转:zTree树控件实战篇:针对多个下拉加载zTree树应该如何做出合理的配置
今天有一个zTree的朋友遇到一个非常棘手的问题,才研究zTree树控件两天就被上头催着看成果,很是苦恼.他面对的问题就是页面内多个地方需要下拉在其文本框下方加载zTree树,由于对zTree下拉加载 ...
- ztree树 叶子节点路径的集合
1.Question Description: ztree树各个节点都带有路径,如“/根节点”,"/根节点/一级节点",“根节点/一级节点/二级节点‘; 现在想获取所选的最末级节点 ...
- 使用zTree和json构建简单树节点
我们经常碰到须要构建树结构展示的情况,我推荐使用zTree和JSON. 比如: <? php /** * * 使用zTree和json构建树节点 * */ $arr = array( 0=> ...
- zTree实现删除树节点
zTree实现删除树节点 1.实现源码 <!DOCTYPE html> <html> <head> <title>zTree实现基本树</titl ...
- ztree异步加载树节点
参考文档:https://www.cnblogs.com/tenWood/p/8620708.html ztree api地址:http://www.treejs.cn/v3/api.php 说明:j ...
随机推荐
- IDAPython 安装和设置(windows+linux)
安装步骤: 我采用的是IDA 6.8 windows安装: 机器上安装了Python,到Python的官网—http://www.python.org/getit/下载2.7的安装包.注意对应操作系统 ...
- 容器服务 TKE 上服务暴露的几种方式
预备知识 1. K8S 上 Service 类型 ClusterIP 通过集群的内部 IP 暴露服务,选择该值,服务只能够在集群内部可以访问,这也是默认的 ServiceType. NodePort ...
- Linux:正则表达式2
基础正则表达式 ^ : 以xx开头 $ :以xx结尾 ^$ :代表空行 . 任意一个字符 \ :转义符号,让有着特殊意义的字符可被使用 * :重复0个或多个前面的字符,例如 a* 2表示a后面 ...
- 基于Goc的Golang代码VSCode实时染色方案
近日,Li Yiyang 老师基于Goc做了个VS Code插件,能够直观的看到被执行到的代码,当真充满想象力: 感兴趣的同学可以去goc仓库查看详情. Goc的核心能力就在于能够帮助我们在被测程序运 ...
- IDEA中Javaweb项目图片加载不出来解决方案
针对IDEA中Javaweb项目中无法加载图片 一.项目的结构及问题介绍 项目结构如下: 在500.jsp页面中访问了img目录下的相关图片,比如背景图片,我在500.jsp中是这样写的路径 bac ...
- virtualbox之紧虚拟主机与本地主机连接
也就是手工配置IP地址.子网掩码.网关和DNS. 设置方法如下: vi /etc/sysconfig/network-scripts/ifcfg-eth0 编辑本地网卡的配置文件 主要查看下面这几项是 ...
- 论文:Show, Attend and Tell: Neural Image Caption Generation with Visual Attention-阅读总结
Show, Attend and Tell: Neural Image Caption Generation with Visual Attention-阅读总结 笔记不能简单的抄写文中的内容,得有自 ...
- 源码解读 TDengine 中线程池的实现
这篇文章中提到了 tsched 的源码可以一读,所以去阅读了一下,总共220来行. 1. 阅读前工作 通过上文了解到这段程序实现的是一个任务队列,同时带有线程池.这段程序是计算机操作系统里经典的con ...
- 利用 QEMU USER 模式运行 mips 程序
摘要 关键字: qemu mips 前述 QEMU是一个处理器模拟软件,可以用来在PC中模拟ARM.MIPS等多种架构的软硬件运行环境.QEMU主要有两种模拟模式: User Mode System模 ...
- Docker实战(6): 导出docker镜像离线包
前言 离线环境安装Docker 镜像,我已知两种情况,以下操作我将采用在可访问外网的机器上通过镜像迁移的方式来给离线环境安装. 环境:服务器node1可访问外网.服务器node2无法访问外网 两台机器 ...