ztree 高级增删改查 节点直接改

效果图：

如图，ztree的树形图，这个插件是国产的，功能也很强大，很多人在使用，样式也有很多选择，推荐大家使用，这边介绍一下我的使用心得，主要之前就介绍过一次，然后不全面，有bug，这次借鉴了大神的经验，特此发出来分享，不多说上干货：

附上ztree的地址：http://www.treejs.cn/v3/main.php#_zTreeInfo

jsp：

<link rel="stylesheet" href="<%=basePath %>zTree/css/metroStyle/metroStyle.css" />

<script src="<%=basePath %>zTree/js/jquery.ztree.all.min.js"></script>

	<div class="col-xs-2">
						<ul class="ztree" id="ztree1"></ul>
					</div>

js：

var zTreeObj;
var setting = {
	//checkable : true,
	view : {
		enable : true,
		showLine : true,
		showIcon : showIconForTreeRight,
		addHoverDom: addHoverDom,
		removeHoverDom: removeHoverDom,
		// fontCss: getFontCss //个性化样式
	},
	/**
	check : {
		enable : true,
		//chkStyle : "checkbox",
		//chkboxType:{"Y":"s","N":"s"}
	},*/
	data : {
		simpleData : {
			enable : true
		}
	/**,
		key: {
			children: "nodes"
		}*/
	},
	callback : {
		onClick : zTreeOnClickRight,
		beforeRemove: beforeRemove,
		onRename: zTreeOnRename,
		onRemove: zTreeOnRemove,
	},
	edit:{
		enable: true,
		showRemoveBtn :true,
		showRenameBtn :true,
		removeTitle :"删除",
		renameTitle :"修改"
	}
};

function showIconForTreeRight(treeId, treeNode) {
	return !treeNode.isParent;
};
// 树的单击事件
function zTreeOnClickRight(event, treeId, treeNode) {
	var treeid = zTreeObj.getSelectedNodes()[0].id;
	var treepid = zTreeObj.getSelectedNodes()[0].pId;
	var treename = zTreeObj.getSelectedNodes()[0].name;
	$("#grid-table").jqGrid('setGridParam',{
		datatype:'json',
		postData:{'workOrderTDTO1.classification':treename}
	}).trigger("reloadGrid");
}

function zTreeOnRename(event, treeId, treeNode, isCancel) {
	$.post('updateNode.action', {
		'classification.id': $.trim(treeNode.id),
		'classification.perId': $.trim(treeNode.pId),
		'classification.classification': treeNode.name
	}, function(data, textStatus, xhr) {
		/*optional stuff to do after success */
		if (textStatus == "success") {
			toastr.success("修改成功");
		} else {
			toastr.error("修改失败");
		}
	});
}
function zTreeOnRemove(event, treeId, treeNode) {
	 $.post('deleteNode.action', {
	 	'classification.id': treeNode.id,
	 }, function(data, textStatus, xhr) {
	 	// optional stuff to do after success
	 	if (textStatus == "success") {
	 		toastr.success("删除成功");
	 	} else {
	 		toastr.error("删除失败");
	 	}
	 });
}

var newCount = 1;
function addHoverDom(treeId, treeNode) {
	var sObj = $("#" + treeNode.tId + "_span");
	var addBtn = $("#addBtn_" + treeNode.tId)
	if (treeNode.editNameFlag || addBtn.length > 0) return;
	var addStr = "<span class='button add' id='addBtn_" + treeNode.tId + "' title='新增' οnfοcus='this.blur();'></span>";

	sObj.after(addStr);
	var btn = $("#addBtn_" + treeNode.tId);

	if (btn) btn.bind("click", function() {
//		var zTree = $.fn.zTree.getZTreeObj("ztree1");
		var name = "新增节点" + (newCount++);
		$.post('addClassification.action', {
			'classification.perId': treeNode.id,
			'classification.classification': name
		}, function(data, textStatus, xhr) {
			/*optional stuff to do after success */
			if (textStatus == "success") {
				var newID = data;
				zTreeObj.addNodes(treeNode, {
					id: newID,
					pId: treeNode.id,
					name: name
				});
				var node = zTreeObj.getNodeByParam("id", newID, null); //根据新的id找到新添加的节点
				zTreeObj.selectNode(node); //让新添加的节点处于选中状态+
			} else {
				toastr.error("加载错误");
			}
		});

		return false;
	});
}
function removeHoverDom(treeId, treeNode) {
	$("#addBtn_"+treeNode.tId).unbind().remove();
}

function beforeRemove(treeId, treeNode) {
	if(treeNode.isParent){
		toastr.warning("请先删除子节点");
		return false;
	} 		
	return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
}

/**
//选中checkbox节点事件  这边只能选择一个，checkbox隐藏

function zTreeOnCheck(event, treeId, treeNode) {
	//$("#parentName").val("");
	nodes = zTree.getCheckedNodes(true);
	for ( var i = 0, l = nodes.length; i < l; i++) {
		v += nodes[i].name + ",";
		alert(nodes[i].pId);
		alert(v);
	}
	//hideMenu(); $("#parentName").html(nodes[j].name);

}*/
/**
 * 显示ztree
 */
function treeShow(data) {
	zTreeObj = $.fn.zTree.init($("#ztree1"), setting, data);
	zTreeObj.expandAll(true);
}
/**
 * 加载ztree
 */
$(function(){
	var basePath=$("#basePath").val();
	$.ajax({
		async : true, //是否异步
		cache : false, //是否使用缓存
		type : 'get', //请求方式,post
		dataType : "json", //数据传输格式
		url : ""+basePath+"findZtree.action", //请求链接
		success : function(data) {
			treeShow(data);
		},error : function(XMLHttpRequest,data) {
			toastr.error("加载错误");
		}
	});

});
$("#addcla").click(function(){
	var name = "新增根节点" + (newCount++);
	$.post('addClassification.action', {
		'classification.classification': name
	}, function(data, textStatus, xhr) {
		/*optional stuff to do after success */
		if (textStatus == "success") {
			var newID = data;
			zTreeObj.addNodes(null, {
				id: newID,
				name: name
			});
			var node = zTreeObj.getNodeByParam("id", newID, null); //根据新的id找到新添加的节点
			zTreeObj.selectNode(node); //让新添加的节点处于选中状态+
		} else {
			toastr.error("加载错误");
		}
	});
})

借鉴博客： http://blog.csdn.net/wangjingna/article/details/50487111