ztree树形菜单的增加删除修改和换图标
2017-03-27 16:02
369 查看
首先需要注意一点,如果有研究过树形菜单,就会发现实现删除和修改功能特别简单,但是增加却有一点复杂。造成这个现象是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属性,然后加上自己的图标地址即可。
先说编辑和删除,注意:树形菜单内容是从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树形菜单实现动态初始化、添加、删除、修改节点
- 【JAVASCRIPT】使用ztree树,实现右键增加,修改,删除节点。带有复选框。
- 二级菜单 增加 删除 修改 jquery
- dede织梦后台如何修改?如何增加删除菜单?(
- zTree树形展示,可新增修改删除节点
- 第8节-Linux增加、修改、删除、查看用户及组
- vue.js树形组件详解,删除双击增加分支
- ASP.NET中数据库的操作初步----增加、删除、修改
- jquery easyui实现datagrid表格向数据库中进行增加,修改和删除操作
- gridview 绑定数据源 SqlDataSource 实现增加修改删除功能
- 6个Linux chkconfig命令实例 - 增加,删除,查看和修改services的自动启动选项
- mysql在表的某一位置增加一列、删除一列、修改列名
- MYSQL用法(十一) 增加字段、删除字段、修改字段名称、修改字段类型
- MySQL增加/删除用户、授权、修改密码
- HTML js 增加,删除,修改,查找,排序
- sql替换语句 批量修改、增加、删除字段内容
- Oracle 增加、修改、删除字段与添加注释
- GOOGLE东西时竟然找到了一个N年前写的东东:asp语言对XML文档中指定节点文本的增加、删除、修改、查看
- html之表格数据增加删除修改
- 修改Menu类增加普通员工,经理,管理员对应的功能菜单的方法