我的树包含的数据比较多。所以不是单纯的一个名字的添加子节点的过程,所以把添加和编辑在另一个form中填写，不知道是否有更好的选择？我的代码在添加和更新Node的时候出现tId是undefined的。不知道我的作法或者代码那里错了。麻烦帮个忙。谢谢。我已经为这事情搞了2天了。真的不知道是什么原因。现在又4点多了。谢谢。
代码如下：
var treeNode;
var tree;
var setting = {
view : {
addHoverDom : addHoverDom,
removeHoverDom : removeHoverDom,
selectedMulti : false
},
edit : {
enable : true,
editNameSelectAll : true,
showRemoveBtn : true,
showRenameBtn : true
},
data : {
simpleData : {
enable : true,
pIdKey : "parentId"
}
},
callback : {
beforeDrag : beforeDrag,
beforeEditName : beforeEditName,
beforeRemove : beforeRemove,
onRemove : onRemove
}
};
function beforeDrag(treeId, treeNodes) {
return false;
}
function beforeEditName(treeId, treeNode) {
//如果编辑，则设置当前数据到form
var zTree = $.fn.zTree.getZTreeObj("tree");
zTree.selectNode(treeNode);
setupForm(treeNode);
return false;
}
function beforeRemove(treeId, treeNode) {
if(treeNode.children){
if(treeNode.children.length>0){
console.debug(treeNode);
alert("不能删除带有下级子类的菜单,请先删除子菜单.");
return false;
}
}
return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");


}
function onRemove(e, treeId, treeNode) {
$.ajax({
type:"GET",
url:"/admin/menu/jsondel/"+treeNode.id,
success:delSuccess,
dataType:"json"
});
console.debug("[ " + getTime() + " onRemove ]" + treeNode.name);
}
function getTime() {
var now = new Date(), h = now.getHours(), m = now.getMinutes(), s = now
.getSeconds(), ms = now.getMilliseconds();
return (h + ":" + m + ":" + s + " " + ms);
}
function addHoverDom(treeId, treeNode) {
var sObj = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_" + treeNode.id).length > 0)
return;
var addStr = "<span class='button add' id='addBtn_" + treeNode.id
+ "' title='添加子菜单' onfocus='this.blur();'></span>";
sObj.after(addStr);
var btn = $("#addBtn_" + treeNode.id);
if (btn)
btn.bind("click", function() {
clearForm();
//添加节点之前把form中的父节点设置尾当前节点ID
$("#parentId").val(treeNode.id);
var zTree = $.fn.zTree.getZTreeObj("tree");
zTree.selectNode(treeNode);
console.debug(treeNode);
//用生成的数据添加节点正常
// zTree.addNodes(treeNode,{"id":"","parentId":treeNode.parentId,"name":"权限设置","url":"/admin/system/permission/1","enabled":"true","idx":"0"})
return false;
});
};
//清除form数据
function clearForm(){
$("#id").val("");
$("#parentId").val("");


$("#name").val("");
$("#url").val("");
$("#enabled").prop("checked",false);
$("#idx").val(0);
}
//根据节点数据，初始化form
function setupForm(treeNode){
$("#id").val(treeNode.id);
$("#parentId").val(treeNode.parentId);
$("#name").val(treeNode.name);
$("#url").val(treeNode.url);
$("#enabled").prop("checked",treeNode.enabled);
$("#idx").val(treeNode.idx);
}
function removeHoverDom(treeId, treeNode) {
$("#addBtn_" + treeNode.id).unbind().remove();
}
function selectAll() {
var zTree = $.fn.zTree.getZTreeObj("tree");
zTree.setting.edit.editNameSelectAll = $("#selectAll").attr("checked");
}
var msg;
var msgs=["恭喜,菜单""添加成功.","menu.add.failed","恭喜,菜单""编辑成功.","menu.edit.failed"]
function saveOrUpdate(r){
//因为点击添加或者编辑的时候已经选中了当前节点，所以在这里可以拿到当前节点信息
var zTree = $.fn.zTree.getZTreeObj("tree");
var treeNode = zTree.getSelectedNodes()[0];
console.debug(treeNode);
console.debug(isAdd);
//如果id为空则是添加子节点，否则是编辑
if($("#id").val()==""){
msg =r.status ? msgs[0]:msg[1];
//把数据库中返回的数据写入id中以便序列化的时候不会缺少数据
$("#id").val(r.id);
console.debug("Add:"+JSON.stringify($("#menuform").serializeJSON()));
zTree.addNodes(treeNode, JSON.stringify($("#menuform").serializeJSON()));
$("#id").val("");
}else{
msg =r.status ? msgs[2]:msg[3];


console.debug("Edit:"+JSON.stringify($("#menuform").serializeJSON()));
zTree.updateNode(treeNode, JSON.stringify($("#menuform").serializeJSON()));
}
message(msg);
}
//数据库删除成功之后删除treeNode
function delSuccess(r){
console.debug(r);
if(r.status) {
var zTree = $.fn.zTree.getZTreeObj("tree");
var treeNode = zTree.getSelectedNodes()[0];
zTree.removeNode(treeNode);
}
message(r.status ?"删除成功":"删除失败");
}
function message(m){
alert(m);
}
//提交添加或者编辑的数据
function submitHandle(e){
e.preventDefault();
var url = "/admin/menu/jsonsave";
$.ajax({
type:"POST",
url:url,
data:JSON.stringify($(this).serializeJSON()),
success:saveOrUpdate,
dataType:"json",
contentType:"application/json"});
return false;
}
function resetTree(){
initTree();
}
function initTree(){
tree=$("#tree");
$.getJSON("/admin/menu/json", null, setTree, "json");
}
function setTree(data){
treeNode = data;
$.fn.zTree.init(tree, setting, treeNode);
}
$(document).ready(function() {
//update & add menu
//注册form提交事件
$("#menuform").submit(submitHandle);
initTree();
});
</
script>

搞定，原来是json的格式不对，不需要用JSON.stringfy函数了，但是又碰到一个问题是不更新节点名称

更新节点名称要在修改了name 之后使用updateNode 方法

我现在也碰到你那样的问题
[ { "id": 1, "pId": 0, "name": "随意勾选 1"}, { "id": 11, "pId": 1, "name": "随意勾选 1-1" }, { "id": 12, "pId": 1, "name": "随意勾选 1-2" }, { "id": 121, "pId": 12, "name": "随意勾选 1-2-1"}, { "id": 122, "pId": 12, "name": "随意勾选 1-2-2" }, { "id": 123, "pId": 12, "name": "随意勾选 1-2-3" }, { "id": 13, "pId": 1, "name": "随意勾选 1-3" }, { "id": 2, "pId": 0, "name": "随意勾选 2", { "id": 21, "pId": 2, "name": "随意勾选 2-1" }, { "id": 22, "pId": 2, "name": "随意勾选 2-2", }, { "id": 221, "pId": 22, "name": "随意勾选 2-2-1", }, { "id": 222, "pId": 22, "name": "随意勾选 2-2-2" }, { "id": 223, "pId": 22, "name": "随意勾选 2-2-3" }, { "id": 23, "pId": 2, "name": "随意勾选 2-3"} ]
我的这种格式错在哪里？能否指点一下，谢谢了！