easyui tree

 CSS:

#auditTree .tree-folder {
    background: url('/images/audit.png') no-repeat center center;
}

#auditTree .tree-file {
	background: url('/images/result.png') no-repeat center center;
}

	#auditTree .tree-file.icon-start, #auditTree .tree-folder.icon-start, #auditTree .tree-folder-open .icon-start {
		background: url('/scripts/jquery-easyui-1.6.3/themes/icons/start.png') no-repeat center center;
	}

#auditTree span.icon-add.icon-start {
	background: url('/scripts/jquery-easyui-1.6.3/themes/icons/edit_add.png') no-repeat center center;
}

	#auditTree .tree-file.icon-stop {
		background: url('/scripts/jquery-easyui-1.6.3/themes/icons/stop.png') no-repeat center center;
	}

#auditTree span.node-action{
	display: none;
	width:16px;
	height:16px;
	vertical-align:top;
}

#auditTree .tree-node-hover span.node-action {
	display: inline-block;
}

html:

<ul id="auditTree" class="easyui-tree" data-options="formatter:formatAuditTreeNode,onContextMenu:showAuditTreeMenu,onDblClick:editAuditNode,onClick:showAuditNode,onAfterEdit:afterEditAuditNode"></ul>
<div id="auditTreeMenu" class="easyui-menu" style="width:120px;" data-options="onClick:auditTreeMenuClick">
	<div id="addChild" data-options="name:'addChild',iconCls:'icon-add'">添加节点</div>
	<div id="removeNode" data-options="name:'removeNode',iconCls:'icon-remove'">移除节点</div>
</div>

 JS:

jQuery(function ($) {
	//添加删除节点
	$("#auditTree").on("click", ".node-action.icon-add,.node-action.icon-remove", function () {
		var node = $(this).parent().parent().closest(".tree-node");
		if ($(this).hasClass("icon-add")) {
			//添加
			_addAuditTreeNode(node);
		}
		else {
			//删除
			_removeAuditTreeNode(node);
		}
	});
});

/*
* 显示节点快捷菜单
*/
function showAuditTreeMenu(e, node) {
	e.preventDefault();
	// 查找节点
	$("#auditTree").tree('select', node.target);
	//结束节点
	if (node.id === -1)
		return;

    //开始节点
	if (node.id === 0) {
		$("#auditTreeMenu").menu("disableItem", document.getElementById("removeNode"))
	}
	else {
		$("#auditTreeMenu").menu("enableItem", document.getElementById("removeNode"))
	}
	
	// 显示快捷菜单
	$("#auditTreeMenu").menu('show', {
		left: e.pageX,
		top: e.pageY
	});
}

/*
* 双击编辑名称
*/
function editAuditNode(node) {
	if (node.id === 0 || node.id === -1)
		return;
	$("#auditTree").tree('beginEdit', node.target);
}

/*
* 编辑名称后同步属性
*/
function afterEditAuditNode(node) {
	if (!node.text) {
		node.text = "节点名称";
		$('#auditTree').tree('update', {
			target: node.target,
			text: node.text
		});
	}
	if (!node.attributes) {
		node.attributes = {};
	}
	node.attributes.name = node.text;
	$("#auditRuleName").textbox("setText", node.text);
}

/*
* 树节点格式化显示
*/
function formatAuditTreeNode(node) {
	let txt = node.text;
	if (node.id == -1) {
		return txt;
	}

    //非开始页节点添加[结束]标记 $('#auditTree').tree("isLeaf",node.target)
	if (node.id !== 0 && (!node.children || !node.children.length)) {
		txt += "[结束]";
	}

    //鼠标悬停添加，不能添加tree-icon样式，否则添加的第一个子节点缩进有问题
	txt += "<span class=\"node-action icon-add\" title=\"添加节点\"></span>";
	if (node.id !== 0) {
		//鼠标悬停移除
		txt += "<span class=\"node-action icon-remove\" title=\"移除节点\"></span>";
	}
	return txt;
}

/*
* 选择节点后显示节点配置
*/
function showAuditNode(node) {

	let attr = node.attributes;
	if (node.id == 0 || node.id == -1) {
		attr = {};
		$("#auditRuleName,#auditRuleCondition").textbox("disable");
		$("#auditRuleUser").tagbox("disable");
	}
	else {
		$("#auditRuleName,#auditRuleCondition").textbox("enable");
		$("#auditRuleUser").tagbox("enable");
	}
	
	//开始初始化表单，不触发编辑改变事件
	window.initAuditForm = true;
	$("#auditRuleName").textbox("setText", attr.name);
	if (attr.auditResult) {
		$("#auditRuleResult").checkbox("check");
	}
	else {
		$("#auditRuleResult").checkbox("uncheck");
	}
	$("#auditRuleCondition").textbox("setText", attr.condition);
	if (attr.users && attr.users.length > 0) {
		var userType = attr.users[0].userType;
		let vs = $.map(attr.users, function (u) { return u.userId; });
		if ($("input[name='auditRuleUserType']:checked").val() != userType) {
			$("#auditRuleUser").one("datasource.changed", function () {
				$("#auditRuleUser").tagbox('setValues', vs);
			});
			$("#auditRuleUserType_" + userType).radiobutton("check");
		}
		else {
			$("#auditRuleUser").tagbox('setValues', vs);
		}
	}
	else {
		$("#auditRuleUser").tagbox('setValues', []);
	}
	//初始化结束
	window.initAuditForm = false;
}

/*
* 添加子节点
*/
function _addAuditTreeNode(target) {
	$('#auditTree').tree('append', {
		parent: target,
		data: [{
			id: -new Date().getTime(),
			text: "节点名称",
			state: "open",
			attributes: {
				id: null,
				name: "节点名称",
				nextId: -1
			}
		}]
	});
}

/*
* 移除子节点
*/
function _removeAuditTreeNode(target) {
	$.messager.confirm("确定", "确定移除当前节点以及子节点吗", function (r) {
		if (r) {
			$('#auditTree').tree('remove', target);
		}
	});
}

/*
* 快捷菜单事件
*/
function auditTreeMenuClick(item) {
	let node = $("#auditTree").tree('getSelected');
	if (item.name == "addChild") {
		_addAuditTreeNode(node.target);
	}
	if (item.name == "removeNode") {
		_removeAuditTreeNode(node.target);
	}
}

效果：