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 实现的多功能 “树插件”, 而且拥有较好的浏览器兼容性,有着丰富的功能以及可以自定 ...
随机推荐
- dev右下角增加弹框提示信息
using System; using System.Drawing; using System.IO; using System.Threading; using System.Windows.Fo ...
- SSH公钥登录且禁止密码登录及更改默认端口
1.ssh生成公私钥 ssh-keygen -t rsa -C "zhangsan@qq.com" 生成密钥的位置如下,id_rsa是私钥.id_rsa.pub是公钥: ➜ .ss ...
- shell :
示例一.(用作注释,占位)#!/bin/bash : this is single line comment : 'this is a multiline comment, second line e ...
- shuoj 418 丢史蒂芬妮(素数筛+sg函数)
丢史蒂芬妮 代码: #include<bits/stdc++.h> using namespace std; +; int SG[N][N]; bool S[N]; vector<i ...
- 各个安卓版本 使用的 Linux Kernel Version
Android Version |API Level |Linux Kernel in AOSP --------------------------------------------------- ...
- English trip -- VC(情景课)8 D Reading
Listen and read. Shop Smart [smɑːt] Employee of the Month: Sara['særə] (萨拉) Lopez(洛佩斯) Congratulati ...
- English trip -- MC(情景课)3 C Do you have a sister?
xu言: 学了困难的在去看以前的课程,发现真的容易多了.So 学习的最好方法和提速方式,那就是找困难的不断去挑战.尝试.尝试.在尝试! Grmmar ['græmə] focus ['fəʊk ...
- 谈谈http与https
今天简单的来说一下http和https, 简单来讲: HTTP 是 超文本协议,TCP 端口是 80 HTTPS 是一种配合了SSL协议的.加密的HTTP 协议 ,TCP端口是 443 HTTP ...
- python-day63--前端
一. 响应式介绍 - 响应式布局是什么? 同一个网页在不同的终端上呈现不同的布局等 - 响应式怎么实现的? 1. CSS3 media query 媒体查询 2. JS去控制网页的布局和样式等 - 缺 ...
- hdu4800 Josephina and RPG 解题报告
Josephina and RPG Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...