<!DOCTYPE html>
<html>
<head>
<title>ZTREE DEMO</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="./plugins/zTree_v3-master/css/zTreeStyle/zTreeStyle.css" type="text/css" />
<link rel="stylesheet" href="./plugins/bootstrap-5.1.3-dist/css/bootstrap.min.css" type="text/css" />
<script type="text/javascript" src="./plugins/zTree_v3-master/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="./plugins/zTree_v3-master/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="./plugins/zTree_v3-master/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="./plugins/bootstrap-5.1.3-dist/js/bootstrap.bundle.js"></script>
<style>
.ztree * {
font-size: 1rem;
}
</style>
<script type="text/javascript">
const nodeTypes = [
{ id: "root", pId: "", name: "root" },
{ id: "comp1", pId: "root", name: "IM" },
{ id: "comp1-1", pId: "comp1", name: "DD" },
{ id: "comp1-1-1", pId: "comp1-1", name: "CY" },
{ id: "comp1-2", pId: "comp1", name: "CY" },
{ id: "comp1-3", pId: "comp1", name: "WG" },
{ id: "comp2", pId: "root", name: "CX" },
{ id: "comp3", pId: "root", name: "DD" },
{ id: "comp3-1", pId: "comp3", name: "CY" },
{ id: "comp4", pId: "root", name: "CY" },
{ id: "comp5", pId: "root", name: "WG" },
];
var setting1 = {
view: {
selectedMulti: false,
showIcon: false,
nameIsHTML: true,
dblClickExpand: dblClickExpand,
},
edit: {
enable: true,
showRemoveBtn: false,
showRenameBtn: false,
},
data: {
simpleData: {
enable: true,
},
},
callback: {
onClick: onClick1,
beforeRemove: beforeRemove1,
},
};
const zTreeId = {
id: 2,
};
var zNodes1 = [
{ id: 1, pId: 0, name: "root", open: true, ddesc: "root", dtype: "root", dfiled1: "", dfiled2: "" },
{ id: 2, pId: 1, name: "IM", open: true, ddesc: "IM", dtype: "comp1", dfiled1: "", dfiled2: "" },
];
function dblClickExpand(treeId, treeNode) {
return treeNode.level > 0;
}
function onClick1(e, treeId, treeNode) {
console.log("clicked");
$("#editId").val(treeNode.id);
$("#dtype").val(treeNode.ddesc);
$("#dfiled1").val(treeNode.dfiled1);
$("#dfiled2").val(treeNode.dfiled2);
$("#editForm").show();
const options = getSubNodes(treeNode.dtype);
if (options.length > 0) {
let html = '<option value="">----</option>';
options.forEach((item) => {
html += '<option value="' + item.id + '">' + item.name + "</option>";
});
$("#subType").html(html);
$("#addPartId").val(treeNode.id);
$("#addPartForm").show();
} else {
$("#addPartForm").hide();
}
if (treeNode.id != 1) {
$("#deletePart").show();
} else {
$("#deletePart").hide();
}
}
function beforeRemove1(treeId, treeNode) {
console.log("remove");
return false;
}
function getSubNodes(id) {
const nodes = [];
nodeTypes.forEach((item) => {
if (item.pId == id) {
nodes.push(item);
}
});
return nodes;
}
function editNode() {
const nodeId = $("#editId").val();
var zTree = $.fn.zTree.getZTreeObj("treeDemo1");
var node = zTree.getNodeByParam("id", nodeId);
node.dtype = $("#dtype").val();
node.dfiled1 = $("#dfiled1").val();
node.dfiled2 = $("#dfiled2").val();
node.name = node.ddesc + '<span style="color:blue">' + node.dfiled1 + node.dfiled2 + "</span>";
zTree.updateNode(node);
// $("#editForm").hide();
}
function addPartNode() {
const nodeId = $("#addPartId").val();
var zTree = $.fn.zTree.getZTreeObj("treeDemo1");
var node = zTree.getNodeByParam("id", nodeId);
const nodeName = $("#subType option:selected").html();
const nodeType = $("#subType").val();
const isParent = getSubNodes(nodeType).length > 0 ? true : false;
const newNode = { id: zTreeId.id + 1, pId: nodeId, isParent: isParent, name: nodeName, open: true, ddesc: nodeName, dtype: nodeType, dfiled1: "", dfiled2: "" };
zTree.addNodes(node, newNode);
zTreeId.id += 1;
console.log(nodeName, nodeType, zTree.getNodes());
$("#subType").val("");
$("#num").val("");
// $("#addPartForm").hide();
}
function deletePartNode() {
var zTree = $.fn.zTree.getZTreeObj("treeDemo1"),
nodes = zTree.getSelectedNodes(),
treeNode = nodes[0];
if (nodes.length == 0) {
alert("请先选择一个节点");
return;
}
if (!confirm("确认删除 节点 -- " + treeNode.name + "及其子节点 吗？")) {
return false;
}
zTree.removeChildNodes(treeNode);
zTree.removeNode(treeNode);
}
$(document).ready(function () {
$.fn.zTree.init($("#treeDemo1"), setting1, zNodes1);
});
</script>
<script>
//--------------------DOWM-------------------->
var setting2 = {
view: {
selectedMulti: false,
showIcon: false,
nameIsHTML: true,
},
check: {
enable: true,
},
data: {
simpleData: {
enable: true,
},
},
callback: {
beforeCheck: beforeCheck2,
onClick: onClick2,
},
};
var zNodes2 = [
{ id: 1, pId: 0, name: "root", open: true },
{ id: 2, pId: 1, name: "IM", open: true },
{ id: 3, pId: 2, name: "DD", open: true },
{ id: 4, pId: 3, name: "CY", open: true },
{ id: 5, pId: 1, name: "DD", open: true },
{ id: 6, pId: 5, name: "CY", open: true },
{ id: 7, pId: 1, name: "CX", open: true },
{ id: 8, pId: 1, name: "CY", open: true },
{ id: 9, pId: 1, name: "WG", open: true },
];
function beforeCheck2(treeId, treeNode) {
return treeNode.doCheck !== false;
}
function onClick2(e, treeId, treeNode) {
$(".type-form").hide();
$("#" + treeNode.name + "Form").show();
}
$(document).ready(function () {
$.fn.zTree.init($("#treeDemo2"), setting2, zNodes2);
});
</script>
</head>
<body class="bg-light">
<div class="container-fluid">
<div class="row mt-4">
<div class="col-3">
<div class="card" style="height: 400px">
<div class="card-header">树状图</div>
<div class="card-body">
<ul id="treeDemo1" class="ztree"></ul>
</div>
</div>
</div>
<div class="col-3">
<div class="card mb-3" style="height: 275px; display: none" id="editForm">
<div class="card-header">编辑</div>
<div class="card-body">
<div class="form">
<form>
<input type="hidden" name="did" id="editId" value="" />
<div class="input-group mb-3">
<span class="input-group-text">name</span>
<input type="text" class="form-control" id="dtype" name="dtype" disabled />
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon2">字段1</span>
<input type="text" class="form-control" id="dfiled1" name="dfiled1" />
</div>
<div class="input-group mb-3">
<span class="input-group-text">字段2</span>
<input type="text" class="form-control" id="dfiled2" name="dfiled2" />
</div>
<div class="input-group">
<button type="button" class="btn btn-primary" onclick="editNode()">确定</button>
</div>
</form>
</div>
</div>
</div>
<div class="card" style="height: 220px; display: none" id="addPartForm">
<div class="card-header">新增子节点</div>
<div class="card-body">
<div class="form">
<form>
<input type="hidden" name="did" id="addPartId" value="" />
<div class="input-group mb-3">
<span class="input-group-text">name</span>
<select class="form-control" name="subType" id="subType">
<option value="">----</option>
</select>
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon2">数量</span>
<input type="text" class="form-control" id="num" name="num" />
</div>
<div class="input-group">
<button type="button" class="btn btn-primary" onclick="addPartNode()">新增</button>
</div>
</form>
</div>
</div>
</div>
<div class="card p-3 mt-3" id="deletePart" style="display: none">
<button class="btn btn-primary" onclick="deletePartNode()">删除此节点</button>
</div>
</div>
<div class="col-3">
<div class="card" style="height: 400px">
<div class="card-header">组成树状图</div>
<div class="card-body">
<ul id="treeDemo2" class="ztree"></ul>
</div>
</div>
</div>
<div class="col-3">
<div class="card mb-3" style="height: 400px">
<div class="card-header">编辑</div>
<div class="card-body">
<div id="rootForm" class="type-form" style="display: none">
<nav>
<div class="nav nav-pills" role="tablist">
<a class="nav-link active" id="nav1-1-tab" data-bs-toggle="tab" data-bs-target="#nav1-1" role="tab" aria-controls="nav1-1" aria-selected="true">BZ</a>
<a class="nav-link" id="nav1-2-tab" data-bs-toggle="tab" data-bs-target="#nav1-2" role="tab" aria-controls="nav1-2" aria-selected="false">ZC</a>
</div>
</nav>
<div class="tab-content">
<div class="tab-pane fade show active" id="nav1-1" role="tabpanel" aria-labelledby="nav1-1-tab">ROOT BZ</div>
<div class="tab-pane fade" id="nav1-2" role="tabpanel" aria-labelledby="nav1-2-tab">ROOT ZC</div>
</div>
</div>
<div id="IMForm" class="type-form" style="display: none">
<nav>
<div class="nav nav-pills" role="tablist">
<a class="nav-link active" id="nav2-1-tab" data-bs-toggle="tab" data-bs-target="#nav2-1" role="tab" aria-controls="nav2-1" aria-selected="true">BZ</a>
<a class="nav-link" id="nav2-2-tab" data-bs-toggle="tab" data-bs-target="#nav2-2" role="tab" aria-controls="nav2-2" aria-selected="false">ZC</a>
</div>
</nav>
<div class="tab-content">
<div class="tab-pane fade show active" id="nav2-1" role="tabpanel" aria-labelledby="nav2-1-tab">IM BZ</div>
<div class="tab-pane fade" id="nav2-2" role="tabpanel" aria-labelledby="nav2-2-tab">IM ZC</div>
</div>
</div>
<div id="CXForm" class="type-form" style="display: none">
<nav>
<div class="nav nav-pills" role="tablist">
<a class="nav-link active" id="nav3-1-tab" data-bs-toggle="tab" data-bs-target="#nav3-1" role="tab" aria-controls="nav3-1" aria-selected="true">BZ</a>
<a class="nav-link" id="nav3-2-tab" data-bs-toggle="tab" data-bs-target="#nav3-2" role="tab" aria-controls="nav3-2" aria-selected="false">ZC</a>
</div>
</nav>
<div class="tab-content">
<div class="tab-pane fade show active" id="nav3-1" role="tabpanel" aria-labelledby="nav3-1-tab">CX BZ</div>
<div class="tab-pane fade" id="nav3-2" role="tabpanel" aria-labelledby="nav3-2-tab">CX ZC</div>
</div>
</div>
<div id="DDForm" class="type-form" style="display: none">
<nav>
<div class="nav nav-pills" role="tablist">
<a class="nav-link active" id="nav4-1-tab" data-bs-toggle="tab" data-bs-target="#nav4-1" role="tab" aria-controls="nav4-1" aria-selected="true">BZ</a>
<a class="nav-link" id="nav4-2-tab" data-bs-toggle="tab" data-bs-target="#nav4-2" role="tab" aria-controls="nav4-2" aria-selected="false">ZC</a>
</div>
</nav>
<div class="tab-content">
<div class="tab-pane fade show active" id="nav4-1" role="tabpanel" aria-labelledby="nav4-1-tab">DD BZ</div>
<div class="tab-pane fade" id="nav4-2" role="tabpanel" aria-labelledby="nav4-2-tab">DD ZC</div>
</div>
</div>
<div id="CYForm" class="type-form" style="display: none">
<nav>
<div class="nav nav-pills" role="tablist">
<a class="nav-link active" id="nav5-1-tab" data-bs-toggle="tab" data-bs-target="#nav5-1" role="tab" aria-controls="nav5-1" aria-selected="true">BZ</a>
<a class="nav-link" id="nav5-2-tab" data-bs-toggle="tab" data-bs-target="#nav5-2" role="tab" aria-controls="nav5-2" aria-selected="false">ZC</a>
</div>
</nav>
<div class="tab-content">
<div class="tab-pane fade show active" id="nav5-1" role="tabpanel" aria-labelledby="nav5-1-tab">CY BZ</div>
<div class="tab-pane fade" id="nav5-2" role="tabpanel" aria-labelledby="nav5-2-tab">CY ZC</div>
</div>
</div>
<div id="WGForm" class="type-form" style="display: none">
<nav>
<div class="nav nav-pills" role="tablist">
<a class="nav-link active" id="nav6-1-tab" data-bs-toggle="tab" data-bs-target="#nav6-1" role="tab" aria-controls="nav6-1" aria-selected="true">BZ</a>
<a class="nav-link" id="nav6-2-tab" data-bs-toggle="tab" data-bs-target="#nav6-2" role="tab" aria-controls="nav6-2" aria-selected="false">ZC</a>
</div>
</nav>
<div class="tab-content">
<div class="tab-pane fade show active" id="nav6-1" role="tabpanel" aria-labelledby="nav6-1-tab">WG BZ</div>
<div class="tab-pane fade" id="nav6-2" role="tabpanel" aria-labelledby="nav6-2-tab">WG ZC</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
