首先需要注意一点,如果有研究过树形菜单,就会发现实现删除和修改功能特别简单,但是增加却有一点复杂。造成这个现象是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树形菜单的增加删除修改和换图标的更多相关文章

  1. ztree树形菜单demo

    阅读目录 zTree树形菜单 回到顶部 zTree树形菜单 树形菜单使用方式如下:HTML引入的方式如下: <!DOCTYPE html> <html> <head> ...

  2. Bootstrap风格zTree树形菜单插件

    这是一款bootstrap风格jQuery zTree树形菜单插件,支持自定义编辑.添加列表菜单.删除列表等功能的jQuery树形菜单代码.在线演示 具体代码实现: <!DOCTYPE html ...

  3. Nodejs之MEAN栈开发(九)---- 用户评论的增加/删除/修改

    由于工作中做实时通信的项目,需要用到Nodejs做通讯转接功能,刚开始接触,很多都不懂,于是我和同事就准备去学习nodejs,结合nodejs之MEAN栈实战书籍<Getting.MEAN.wi ...

  4. 在Javascript操作JSON对象,增加 删除 修改

    在Javascript操作JSON对象,增加删除修改全有的,详情见代码 <script type="text/javascript"> var jsonObj2 = { ...

  5. zTree树形菜单交互选项卡效果实现

    1. 添加自定义属性 page 2. 为 ztree 每个树形节点,添加点击事件 <!DOCTYPE html> <html> <head> <meta ch ...

  6. zTree树形菜单使用实例

    在每个节点添加 id 和 pid, id 表示当前节点编号,pid 表示父节点编号 第一步:在页面显示菜单位置,添加 ul设置 class=”ztree” 第二步:开启简单数据格式支持 第三步:编写树 ...

  7. AutoCad 二次开发 .net 之层表的增加 删除 修改图层颜色 遍历 设置当前层

    AutoCad 二次开发 .net 之层表的增加 删除 修改图层颜色 遍历 设置当前层 AutoCad 二次开发 .net 之层表的增加 删除 修改图层颜色 遍历 设置当前层我理解的图层的作用大概是把 ...

  8. [JavaWeb基础] 004.用JSP + SERVLET 进行简单的增加删除修改

    上一次的文章,我们讲解了如何用JAVA访问MySql数据库,对数据进行增加删除修改查询.那么这次我们把具体的页面的数据库操作结合在一起,进行一次简单的学生信息操作案例. 首先我们创建一个专门用于学生管 ...

  9. Ztree节点增加删除修改和Icheck的用法

    简介 官方文档:http://www.treejs.cn/v3/api.php zTree 是一个依靠 jQuery 实现的多功能 “树插件”, 而且拥有较好的浏览器兼容性,有着丰富的功能以及可以自定 ...

随机推荐

  1. python pstats ,profile 性能分析

    #! /usr/bin/env python # encoding=utf8 import pstats import profile def func1(): for i in range(1000 ...

  2. JVM内存管理的机制

    Eclipse崩溃,错误提示:MyEclipse has detected that less than 5% of the 64MB of Perm Gen (Non-heap memory) sp ...

  3. Python day13文件的读写

    # 文件操作 f=open("E:\\1.txt",encoding="GBK")#打开文件 print(f.writable())#是否可写 print(f. ...

  4. ubuntu 常用设置

    ●1 问题:使用virt-manager创建虚拟机时,Virtual network 'default':NAT(Inactive) 解决方法:1,查看网络状态sudo virsh net-list ...

  5. iptable 大量需要封杀的ip地址便捷方法

    xu言: 最近家里出了点事,一直没有坚持写blog.感觉还有好一堆事等着我做呢.毕竟人生苦短,及时"行乐". 今天看到我的一个iptable的草稿,赶紧搬上来.以免日后忘记. 有些 ...

  6. android--------HttpURLConnection的get,post和图片加载

    URLConnection是个抽象类,它有两个直接子类分别是HttpURLConnection和JarURLConnection.另外一个重要的类是URL,通常URL可以通过传给构造器一个String ...

  7. shell中引号的妙用

    #!/bin/bashfile=('leon 01.cap' leon-02.cap nicky-01.cap whoareu-01.cap 8dbb-01.cap)dict=(simple.txt ...

  8. mysql 随机获取数据并插入到数据库中

    insert into result (user_id, activity_id, number) select user_id, activity_id from `activity_record` ...

  9. CF-500div2-A/B/C

    A. Piles With Stones time limit per test 1 second memory limit per test 256 megabytes input standard ...

  10. hdu 1258

    Sum It Up Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total S ...