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);
}
}
效果: