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

    words count program 统计文本文件的字符数,单词数和行数. 实现一个统计程序,他能正确的统计程序文件中的字符数,单词数和行数. 源码链接 https://github.com/sup ...

  2. Android 學習之旅!(2)

    早幾天因爲學車,弄了幾天時間和精力過去,今天終於考過了(科目二,還是補考的...)嗯..不管這麼多了..今天又開始我的android 學習之旅!! 筆記: platform-tools目錄下的文件: ...

  3. 第三个Sprint冲刺第五天(燃尽图)

  4. docker+redis 持久化配置(AOF)

    RDB持久化与AOF持久化简单描述 RDB:RDB使用快照的方式存储数据库中的内容,直接将所有键值对数据全部存入二进制文件.建议使用BGSAVE来进行备份,整个过程会新fork一个子进程来执行,不影响 ...

  5. PAT 1047 编程团体赛

    https://pintia.cn/problem-sets/994805260223102976/problems/994805277163896832 编程团体赛的规则为:每个参赛队由若干队员组成 ...

  6. RBAC权限控制系统

    1.概述 RBAC(Role-Based Access Control )基于角色的访问控制. RBAC的权限控制可以抽象概括为:判断[Who是否可以对What进行How的访问操作(Operator) ...

  7. [日常工作]GS使用消息队列进行凭证实时记账 提高性能配置方法

    1. 安装消息队列服务 使用平台技术部的一键安装工具,安装. 自带jdk以及activeMQ 自动注册服务. 比较方便. 2. 修改/gsp/config下面的MQ配置文件,将消息队列服务修改为当前虚 ...

  8. ionic2添加 android平台出现的问题

    nodejs版本不宜过高  cordova版本不宜过高 此情况应采取 cordova platform add android --nofetch

  9. mxnet,theano与torch的简单比较

    这篇文章我想来比较一下Theano和mxnet,Torch(Torch基本没用过,所以只能说一些直观的感觉).我主要从以下几个方面来计较它们: 1.学习框架的成本,接口设计等易用性方面. 三个框架的学 ...

  10. appium学习记录2

    unittest 学习 每执行一次 testcase 就会调用一次 setUP 与teardown 类方法只会执行一次 开始 与结束时候执行 类似反射方法 __init__ 与 __del__ set ...