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

效果图:ztree 高级增删改查 节点直接改_第1张图片

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

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

jsp:

	

    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 = "";
    
    	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

    你可能感兴趣的:(ztree,jquery)