简介
结合 7.04 如何新增节点后立刻编辑名称 与 7.07 如何处理 增、删、改操作结果服务端保存 又会出现一种需求——编辑后的规则校验，对于新手来说，这又是棘手问题。
这篇文章只针对使用 zTree 默认的重命名操作时的校验处理进行讲解。对于使用自定义图层编辑节点属性时， 如何校验完全在你弹出图层那里进行， 与 zTree 不会有任何瓜葛，所以本篇对此类型的校验不予考虑。
看这篇文档时，你需要对照 API 文档进行学习（http://www.treejs.cn/v3/api.php）
误区
-
不了解 zTree 的 callback 回调机制中 before 和 on 的关系
例如：beforeRename 和 onRename；这里重申一下， beforeRename 就是用户在编辑框内已经修改了名称，并确认，zTree 捕获到事件，但是并没有去修改节点属性之前触发的，专门供用户做数据校验等操作，通过 返回 true / false 来确认是否执行重命名操作。 所以一旦 beforeRename 回调中 return false，将不再触发 onRename 回调。
-
对于什么是异步操作完全没有概念，提到异步就知道是 ajax 加载数据，别的一概不知。这部分朋友，请你赶紧去看 4.01 异步加载基础， 有时间的再去网上搜搜相关资料学习一下。
对回调操作完全没有概念，直接导致在 beforeRename 回调中 触发 ajax 操作后，直接在 ajax 的 success 内执行 return 操作，并且天真的以为这个 return 会成为 beforeRename 的返回值
前端校验
其实这个已经不需要再提， 但为了起到对比的作用，还是简单的说一下吧。上面提到的 7.04 如何新增节点后立刻编辑名称 这一篇文章内的 Demo 就是采用的前端校验
if (!isCancel && newName.length == 0) {
....
}
因为是前端校验，就没有了异步过程，所以这个 Demo 中反倒要利用 setTimeout 来制造异步过程，避免操作 节点的 input 异常
后端校验
进行后端校验的重点
- 利用 beforeRename，不要使用 onRename
- 正确认识 ajax 的回调流程
- 利用 cancelEditName 方法在 ajax 之后进行操作
beforeRename: function(treeId, treeNode, newName, isCancel) {
// 如果是取消操作，不进行任何处理
if (isCancel) {
return true;
}
var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");
// 发起 ajax 请求
$.ajax({
// 其他参数自行配制，这里只演示 success 和 error
success: function(data) {
// 至于 ajax 返回什么样的数据来确定是否成功，请根据你的实际情况进行调整，这里只模拟简单的判断，即 data 直接就是 true 或 false
if (!!data) {
// 校验成功
zTreeObj.cancelEditName(newName);
} else {
// 校验失败，一定要注意把 input 的 disabled 去掉
$('#' + treeNode.tId + '_input').attr('disabled', null);
zTreeObj.editName(treeNode);
}
},
error: function() {
// 如果 ajax 失败，一定要注意把 input 的 disabled 去掉
$('#' + treeNode.tId + '_input').attr('disabled', null);
zTreeObj.editName(treeNode);
}
});
// 发起 ajax 请求期间，设置 input 框为只读状态，避免用户再次修改
$('#' + treeNode.tId + '_input').attr('disabled', 'disabled');
return false;
}
有的朋友在做之前，觉得写起来太复杂。。。其实那是因为你还不熟悉，其实只要这点儿代码就能搞定你的需求！
