即时编辑
实现代码如下 详细参见http://www.360ui.net:
var setting1 = {
view: {
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
selectedMulti: false
},
edit: {
enable: true,
renameTitle:"修改",
removeTitle:"删除"
},
callback: {
//不允许拖拽
beforeDrag: beforeDrag1,
//修改前确认
beforeEditName: beforeEditName1,
//修改完时的处理
beforeRename: beforeRename1,
//修改成功后处理
onRename: onRename1,
//删除前确认
beforeRemove: beforeRemove1
}
};
var zNodes1 =[
{ id:1, parentId:0, name:"父节点 1", open:true},
{ id:11, parentId:1, name:"叶子节点 1-1"},
{ id:12, parentId:1, name:"叶子节点 1-2"},
{ id:13, parentId:1, name:"叶子节点 1-3"},
{ id:2, parentId:0, name:"父节点 2", open:true},
{ id:21, parentId:2, name:"叶子节点 2-1"},
{ id:22, parentId:2, name:"叶子节点 2-2"},
{ id:23, parentId:2, name:"叶子节点 2-3"},
{ id:3, parentId:0, name:"父节点 3", open:true},
{ id:31, parentId:3, name:"叶子节点 3-1"},
{ id:32, parentId:3, name:"叶子节点 3-2"},
{ id:33, parentId:3, name:"叶子节点 3-3"}
];
function initComplete(){
$.fn.zTree.init($("#tree-1"), setting1, zNodes1);
}
function beforeDrag1(treeId, treeNodes) {
return false;
}
//确认是否进入编辑状态
function beforeEditName1(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("tree-1");
//选中该节点
zTree.selectNode(treeNode);
zTree.editName(treeNode);
return true;
}
//修改完时处理不进行后台数据处理
function beforeRename1(treeId, treeNode, newName) {
if (newName.length == 0) {
top.Dialog.alert("节点名称不能为空.");
var zTree = $.fn.zTree.getZTreeObj("tree-1");
setTimeout(function(){zTree.editName(treeNode)}, 10);
return false;
}
return true;
}
//修改成功后处理
function onRename1(event, treeId, treeNode) {
//此处进行ajax后台数据处理
}
//确认是否删除+删除处理
function beforeRemove1(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("tree-1");
//选中该节点
zTree.selectNode(treeNode);
top.Dialog.confirm("确认删除节点 -- " + treeNode.name + " 吗?",function(){
zTree.removeNode(treeNode);
//此处进行ajax后台数据处理
});
return false;
}
//添加新增按钮
var newCount = 1;
function addHoverDom(treeId, treeNode) {
if (treeNode.editNameFlag || $("#addBtn_" + treeNode.id).length > 0) return;
var sObj = $("#" + treeNode.tId + "_span");
var addStr = "<button type='button' class='add' id='addBtn_" + treeNode.id + "' title='添加' onfocus='this.blur();'></button>";
sObj.append(addStr);
var btn = $("#addBtn_" + treeNode.id);
if (btn){
btn.bind("click", function(){
var zTree = $.fn.zTree.getZTreeObj("tree-1");
var newNode;
newNode = zTree.addNodes(treeNode, {id:(100 + newCount), parentId:treeNode.id, name:"新增" + (newCount++)});
if (newNode) {
zTree.editName(newNode[0]);
}
return false;
});
}
};
function removeHoverDom(treeId, treeNode) {
$("#addBtn_" + treeNode.id).unbind().remove();
};
相关推荐
可编辑树 javascript+JSTL 实现可编辑树 动态编辑树
自动生成树形内容 动态树形结构可编辑
一个可以编辑叶子节点的ext2的例子
基于对话框的,可对树视图控件进行编辑的源码
将文件直接复制到layui/lay/modules目录下,会覆盖layui原有的tree.js,调用方法与layui树形组件的适应方式一致,新增的方法可在文件中查看
一个基于VC++的树形控件的学习例子,可通过编译的
这是一个 支持layui树编辑的插件 ,可以用来当做菜单选择 也可以用来 进行树形表格展示,使用起来简单,回显也非常方便。如有不懂还可留言
树形连接数据库,可拖拽,可编辑、删除、增加
NULL 博文链接:https://zyjustin9.iteye.com/blog/2121799
MFC中创建可编辑节点的树形控件绝对经典! 希望对你有所帮助!
tree组件可实现节点拖拽、双击编辑、右键操作等等
jquery ztree自定义编辑的树形菜单插件----------------------------------------------------------
NULL 博文链接:https://as3.iteye.com/blog/865559
金蝶云苍穹列表界面如何以树形结构在表格中展示业务数据
VC/MFC 创建 可编辑节点的 树形控件
vued3treeVUE实现自定义节点的树结构
可编辑的树形表格有两个分支哦,v4 是 antd v4 的版本发现一个更好更强大的:计划学习完这块就不更新此仓库了
1、可编辑树 - 树显示可编辑的环境变量和值。点击缩略图查看完整大小的图片 2、不需要打字- 你并不需要输入长路径名。只要选择路径使用档案树 3、便携模式 - RapidEE不需要安装,可运行的“便携式应用”。 4、易于...
一个完整的仿照windows资源管理器的ajax无限级树形菜单(含数据库)
树形listctrl,双击可编辑,右键添加删除,重绘表头,设置表头字体