setting添加 edit: { drag: { isCopy: false , isMove: true }, enable: true , // 设置是否处于编辑状态 showRemoveBtn: showRemoveAndRenameBtn, showRenameBtn: showRemoveAndRenameBtn, removeTitle: "删除" , renameTitle: "修改" }, vi
setting添加
edit: { drag: { isCopy: false, isMove: true }, enable: true,//设置是否处于编辑状态 showRemoveBtn: showRemoveAndRenameBtn, showRenameBtn: showRemoveAndRenameBtn, removeTitle: "删除", renameTitle: "修改" }, view: { dblClickExpand: false, showLine: false, addHoverDom: addHoverDom, // 用于当鼠标移动到节点上时,显示用户自定义控件,显示隐藏状态同 zTree 内部的编辑、删除按钮 removeHoverDom: removeHoverDom, // 用于当鼠标移出节点时,隐藏用户自定义控件,显示隐藏状态同 zTree 内部的编辑、删除按钮 selectedMulti: false }, callback: { onClick: archiveTypeTreeClick, beforeRemove: deleteNodeBefore, //节点被删除之前的事件,并且根据返回值确定是否允许删除操作 beforeEditName: zTreeBeforeEditName //节点被编辑之前的事件,并且根据返回值确定是否允许编辑操作 }
显示编辑和删除过滤,也可以分开来
function showRemoveAndRenameBtn(treeId, treeNode) { if (treeNode不现实编辑和删除条件) { // 不显示编辑和删除按钮 return false; } else { return true; } }
图示
显示编辑和删除时
不显示编辑和删除时
鼠标移动在节点上添加【添加事件按钮】
function addHoverDom(treeId, treeNode) { //设置只有父节点可以新增 其它只能编辑 if (treeNode需要添加事件的条件) { treeId = $("#" + treeNode.tId + "_span"); treeNode.editNameFlag || 0 < $("#addBtn_" + treeNode.tId).length || (treeId.after("<span class=‘button add‘ id=‘addBtn_" + treeNode.tId + "‘ title=‘新增‘ ></span>"), (treeNode = $("#addBtn_" + treeNode.tId)) && treeNode.bind("click", function () { 这里是点击添加事件调用(); return true; })) } }
图示
显示添加按钮
鼠标移走后删除添加的事件
function removeHoverDom(treeId, treeNode) { $("#addBtn_" + treeNode.tId).unbind().remove(); }
图示
移走删除添加按钮
删除节点事件修改成触发自定义事件,返回false是阻止删除节点事件
参考官网:http://www.treejs.cn/v3/api.php 方法setting.callback.beforeEditName
function deleteNodeBefore(treeId, treeNode) { if (不显示删除事件的条件) { // 不做处理 return false; } 这里是自定义事件(); return false; }
编辑节点事件修改成触发自定义事件,返回false是不触发原来ztree编辑节点名称事件
参考官网:http://www.treejs.cn/v3/api.php 方法setting.callback.beforeRemove
function zTreeBeforeEditName(treeId, treeNode) { if (不显示编辑事件的条件) { // 不做处理 return false; } 这里是自定义事件(); return false; }