如何实现点编辑按钮的时候直接进入编辑状态,然后失去焦点的时候弹出提示窗确定是否编辑,点【确定】之后向服务器提交数据,更新节点,点【取消】之后,什么都不做
如何实现点编辑按钮的时候直接进入编辑状态,然后失去焦点的时候弹出提示窗确定是否编辑,点【确定】之后向服务器提交数据,更新节点,点【取消】之后,什么都不做。
目前我看demo里是点【编辑】按钮就弹出来提示窗了,这个不符合我们的需求,然后我就研究了下beforeRename方法,在该方法里弹出提示窗,但是又发现一个问题,这样子编辑完了直接按Enter键之后就弹不出来提示窗了。
function beforeRename(treeId, treeNode, newName, isCancel) { console.info("进入--->"); if (newName.length == 0) { zTree.cancelEditName(); Toast.showWarning("节点名称不能为空"); return false; } else { console.info("进入--2->"); var text = ''; var requestType = 'POST'; if (title.startsWith('新增')) { text = newName; requestType = 'POST'; } else { text = treeNode.name; requestType = 'PUT'; } console.info("进入--3->"); swal({ title: title, text: "是否确认" + title + ":" + text, html: true, showCancelButton: true, closeOnConfirm: false, showLoaderOnConfirm: false, animation: "slide-from-top", confirmButtonText: "确认", cancelButtonText: "取消", }, function (isConfirm) { console.info("进入--4->"); if (isConfirm) { console.info("进入--5->"); commonAjaxRequest(url, function (data, err) { if (err !== undefined) { return; } treeNode.isCreated = true; zTree.updateNode(treeNode); console.info("确认" + title + "-------->" + treeNode.name); swal.close(); Toast.showSuccess(title + "成功"); }, body, requestType); } else { console.info("进入--6->"); if (title.startsWith('新增')) { zTree.removeNode(treeNode); } else { treeNode.name = oldName; zTree.updateNode(treeNode); console.info("取消" + title + "--------" + treeNode.name); zTree.cancelEditName(newName); } swal.close(); } }); } } return false; }
日志: 进入---> VM33274:275 进入--2-> VM33274:285 进入--3->
你这代码连缩进都没有,看起来太累了。
注意以下几点: 1、务必要考虑 isCancel 参数,因为 Esc 键按下后会取消编辑操作,同时触发 beforeRename 回调 2、想弹出自己的 图层,那么就默认让 beforeRename 回调中的代码 return false;这样可以阻止 zTree 的默认行为
另外, 哪个 demo 是 编辑按钮点击后就会弹出提示信息的? 我怎么记得没有这样的? 况且 点击编辑按钮时, 跟 beforeRename 回调也没什么关系呀