ztree树形菜单的增加删除修改和换图标
首先需要注意一点,如果有研究过树形菜单,就会发现实现删除和修改功能特别简单,但是增加却有一点复杂。造成这个现象是ztree树形菜单的历史遗留问题。大概是之前的版本没有增加这个功能,后来的版本加上了这个功能,造成了增加和别的功能不一样。
先说编辑和删除,注意:树形菜单内容是从json中获取的。
一、需要引入的文件和界面
二、js部分,设置setting
var zTreeObj;
// zTree 的参数配置,深入使用请参考 API 文档(setting 配置详解)
var setting = {
edit:{
enable: true,
drag:{
isMove:true,
prev:true,
autoOpenTime: 0
},
editNameSelectAll: true,
showRemoveBtn: true,
removeTitle: "删除节点",
renameTitle: "编辑节点名称",
showRenameBtn: true,
},
data: {
simpleData: {
enable: true,
idKey: "id",
nameKey: "name"
}
}
};
然后在通过ajax获取菜单以后,进行初始化
$(document).ready(function(){
$.ajax({
url:'tree.json',
type: "get",
dataType: "json",
success:function(data){
//树形菜单初始化
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting,data);
},
error:function(xhr){
alert(xhr.status);
}
});
});
效果:
当鼠标悬浮上去的时候效果:
点击后面的按钮就可以进行编辑和删除了。
三,介绍增加按钮:
在setting中增加view的设置:
然后是addHoverDom函数,用于添加增加按钮功能,还有removeHoverDom函数,用于当鼠标移出菜单的时候去掉增加按钮。
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(){
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var newnade={id:(100 + newCount),name:"new node" + (newCount++)};
zTree.addNodes(treeNode,newnade);
$.ajax({
url:'tree.json',
type: "get",
dataType: "json",
success:function(data){
data.push(JSON.parse(newnade));
console.log(JSON.stringify(data));
//alert(data[0].children[0].children[0].id);
}
});
return false;
});
}
function removeHoverDom(treeId, treeNode) {
$("#addBtn_"+treeNode.tId).unbind().remove();
};
效果如图:
点击绿色的按钮以后就可以增加一个孩子。
还有更多的配置请参考http://www.treejs.cn。
三、换图标
在json数据中手动加入一个icon属性,然后加上自己的图标地址即可。
ztree树形菜单的增加删除修改和换图标的更多相关文章
- ztree树形菜单demo
阅读目录 zTree树形菜单 回到顶部 zTree树形菜单 树形菜单使用方式如下:HTML引入的方式如下: <!DOCTYPE html> <html> <head> ...
- Bootstrap风格zTree树形菜单插件
这是一款bootstrap风格jQuery zTree树形菜单插件,支持自定义编辑.添加列表菜单.删除列表等功能的jQuery树形菜单代码.在线演示 具体代码实现: <!DOCTYPE html ...
- Nodejs之MEAN栈开发(九)---- 用户评论的增加/删除/修改
由于工作中做实时通信的项目,需要用到Nodejs做通讯转接功能,刚开始接触,很多都不懂,于是我和同事就准备去学习nodejs,结合nodejs之MEAN栈实战书籍<Getting.MEAN.wi ...
- 在Javascript操作JSON对象,增加 删除 修改
在Javascript操作JSON对象,增加删除修改全有的,详情见代码 <script type="text/javascript"> var jsonObj2 = { ...
- zTree树形菜单交互选项卡效果实现
1. 添加自定义属性 page 2. 为 ztree 每个树形节点,添加点击事件 <!DOCTYPE html> <html> <head> <meta ch ...
- zTree树形菜单使用实例
在每个节点添加 id 和 pid, id 表示当前节点编号,pid 表示父节点编号 第一步:在页面显示菜单位置,添加 ul设置 class=”ztree” 第二步:开启简单数据格式支持 第三步:编写树 ...
- AutoCad 二次开发 .net 之层表的增加 删除 修改图层颜色 遍历 设置当前层
AutoCad 二次开发 .net 之层表的增加 删除 修改图层颜色 遍历 设置当前层 AutoCad 二次开发 .net 之层表的增加 删除 修改图层颜色 遍历 设置当前层我理解的图层的作用大概是把 ...
- [JavaWeb基础] 004.用JSP + SERVLET 进行简单的增加删除修改
上一次的文章,我们讲解了如何用JAVA访问MySql数据库,对数据进行增加删除修改查询.那么这次我们把具体的页面的数据库操作结合在一起,进行一次简单的学生信息操作案例. 首先我们创建一个专门用于学生管 ...
- Ztree节点增加删除修改和Icheck的用法
简介 官方文档:http://www.treejs.cn/v3/api.php zTree 是一个依靠 jQuery 实现的多功能 “树插件”, 而且拥有较好的浏览器兼容性,有着丰富的功能以及可以自定 ...
随机推荐
- python pstats ,profile 性能分析
#! /usr/bin/env python # encoding=utf8 import pstats import profile def func1(): for i in range(1000 ...
- JVM内存管理的机制
Eclipse崩溃,错误提示:MyEclipse has detected that less than 5% of the 64MB of Perm Gen (Non-heap memory) sp ...
- Python day13文件的读写
# 文件操作 f=open("E:\\1.txt",encoding="GBK")#打开文件 print(f.writable())#是否可写 print(f. ...
- ubuntu 常用设置
●1 问题:使用virt-manager创建虚拟机时,Virtual network 'default':NAT(Inactive) 解决方法:1,查看网络状态sudo virsh net-list ...
- iptable 大量需要封杀的ip地址便捷方法
xu言: 最近家里出了点事,一直没有坚持写blog.感觉还有好一堆事等着我做呢.毕竟人生苦短,及时"行乐". 今天看到我的一个iptable的草稿,赶紧搬上来.以免日后忘记. 有些 ...
- android--------HttpURLConnection的get,post和图片加载
URLConnection是个抽象类,它有两个直接子类分别是HttpURLConnection和JarURLConnection.另外一个重要的类是URL,通常URL可以通过传给构造器一个String ...
- shell中引号的妙用
#!/bin/bashfile=('leon 01.cap' leon-02.cap nicky-01.cap whoareu-01.cap 8dbb-01.cap)dict=(simple.txt ...
- mysql 随机获取数据并插入到数据库中
insert into result (user_id, activity_id, number) select user_id, activity_id from `activity_record` ...
- CF-500div2-A/B/C
A. Piles With Stones time limit per test 1 second memory limit per test 256 megabytes input standard ...
- hdu 1258
Sum It Up Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total S ...