即时编辑
实现代码如下 详细参见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='添加' οnfοcus='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();
};