首先需要注意一点,如果有研究过树形菜单,就会发现实现删除和修改功能特别简单,但是增加却有一点复杂。造成这个现象是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删除某个节点下的全部子节点后,父节点图标还是文件夹

    <script type="text/javascript"> //删除节点 zTree.removeNode(treeNode); //获取删除节点的父节点 var ...

  2. ztree树形图自定义图标在jeecg框架中不显示

    有时候工作遇到问题,就会硬着头皮去解决,今天给大家说一个ztree树形图自定义图标在jeecg框架中不显示的解决方法 对于这个问题,官方观法说法是在节点元素中加入icon的字段,然后后跟图标的url, ...

  3. WinForm------TreeList修改节点图标和按钮样式

    转载: https://documentation.devexpress.com/#WindowsForms/DevExpressXtraTreeListTreeList_CustomDrawNode ...

  4. 关于点击ztree的节点将页面生成到easyui的新增选项卡(easyui-tabs)时,总是在浏览器中生成一个新的页面的问题

    最近的项目中用到了easyui,还有ztree菜单.在这里将我遇到的一些问题写出来算是做个笔记吧. 这是我头一次在博客园里分享代码,我的处女作,写的不好的地方还望各位见谅! 由于很久没有写过前台的东西 ...

  5. DELPHI TreeView 文件目录树和 设置节点图标 完整

        DELPHI TreeView 文件目录树和 设置节点图标   下载地址 http://download.csdn.net/detail/teststudio/6448293     需要制作 ...

  6. TreeView设置节点图标

    TreeView设置节点图标 没子节点的设置其图标为 0 有节点的设置其图标为 1 procedure TForm1.Button1Click(Sender: TObject);var   i:Int ...

  7. ztree设置节点checked,选中某节点等相关操作

    ztree设置节点checked,选中某节点等相关操作 1.根据id获取树的某个节点: var zTree = $.fn.zTree.getZTreeObj("mytree"); ...

  8. Dev TreeList 添加节点图标问题

    1. 在设计界面添加imageCollection控件,在属性页设置图标(可Load from disk,也可从Load from dev gallery) 2. TreeList控件有一个叫做Cus ...

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

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

随机推荐

  1. Proxy 示例

    package cn.proxy03; import java.lang.reflect.InvocationHandler; import java.lang.reflect.Method; imp ...

  2. 团队作业:SRS文档-飞机大战

    本实验为团队合作项目作业的一部分:SRS文档-飞机大战 项目分工:SRS文档项目为梁JM负责完成 实验要求: 3.SRS文档(第二周,截止5月31日)              要求对所选项目进行用例 ...

  3. Mock.js的简单使用

    Mock.js 提供的种类有: 步骤: 首先安装:cnpm install mockjs 创建一个mock.js的文件,写好需要引入的数据格式 在main.js中引入mock.js文件: requir ...

  4. PHP利用GD库处理图片方法实现

    这里写的是完成每个功能的函数,可以复制单个函数直接使用,这里的每个函数都是另外一篇PHP常用类------图片处理类Image当中的方法进行细化,可以参考一下 废话不多说,直接付代码吧! 添加水印(文 ...

  5. laravel 数据库获取值的常用方法

    ---恢复内容开始--- find($id) 需要一个主键$id并返回一个模型对象,若不存在则返回null findOrFail($id) 需要一个主键$id并返回一个模型对象,若不存在则发生错误,抛 ...

  6. linux 清空history以及记录原理

    1.当前session执行的命令,放置缓存中,执行exit时,把缓存信息写入~/.bash_history 2.当session直接被kill时,缓存中的历史命令不会写入~/.bash_history ...

  7. From 简书 转帖一下如何安装k8s1.10 改天做下实验. https://www.jianshu.com/p/9c7e1c957752

    centos7.3 kubernetes/k8s 1.10 离线安装 老菜_misa 关注 2018.04.25 23:57 字数 1243 阅读 266评论 1喜欢 3 本文介绍在centos7.3 ...

  8. Linux环境(CentOS)安装维护过程中用到的常见命令

    1. yum 安装时需要选择仓库 一般的路径 /etc/repos.d/ 2. 查看安装了哪些软件的 yum list |grep docker installed 的就是已经安装的软件. 3. 卸载 ...

  9. [书摘]图解HTTP 状态码

    状态码类别: 1XX informational 信息性状态码 2XX Suess   成功状态码 3XX Redirection 重定向状态码 4XX Client error 客户端错误状态码 5 ...

  10. [转帖] SQL参数化的优点 CopyFrom https://www.cnblogs.com/-lzb/articles/4840671.html

    梦在远方的小猪 感谢原作者...  后面总结的五点感觉挺好的.. 自己之前的知识点一直没有串起来. 转帖记录一下感谢. sql参数化参数化 说来惭愧,工作差不多4年了,直到前些日子被DBA找上门让我优 ...