需求:左侧人员勾选添加至右侧,也可取消勾选,右侧初始数据不可删除,新添加的可以删除,并且,右侧初始数据,左侧不可勾选
问题: 目前只实现了一个根节点下,有两个部门,本来是打算用id匹配,但是父节点1勾选的时候,子节点会加错位置,现在是由name匹配
仅作记录;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>树形菜单表格</title>
<link rel="stylesheet" type="text/css" href="../lib/layui/css/layui.css"/>
<link rel="stylesheet" href="../lib/zTree_v3/css/metroStyle/metroStyle.css" type="text/css">
<link rel="stylesheet" type="text/css" href="../css/new-common.css"/>
<style type="text/css">
.gt-body {
height: 100%;
padding: 0;
}
.gtmap .gt-body .gtmap-body .gt-position-left {
width: 50%;
float: left;
height: 100%;
padding: 1% 0;
border-right: 1px solid #ccc;
box-sizing: border-box;
}
.gtmap .gt-body .gtmap-body .gt-position-right {
width: 50%;
height: 100%;
padding: 1% 0;
left: 50%;
overflow: auto;
}
.gtmap .gt-body .gtmap-body .tree-container {
background: #fff;
padding: 0;
right: 0px;
left: 20px;
}
.gtmap .gt-body .gtmap-body .tree-container .person-list {
position: absolute;
left: 0;
right: 0;
top: 30px;
bottom: 0;
overflow: auto;
padding-right: 20px;
}
#treeDemo {
position: absolute;
top: 40px;
bottom: 0;
left: 0;
right: 0;
}
.tip-info {
height: 30px;
line-height: 30px;
}
.person-list li {
height: 30px;
line-height: 30px;
color: #333;
}
.person-list li .layui-icon {
font-size: 20px;
color: #aaa;
float: right;
position: relative;
top: 1px;
cursor: pointer;
}
.person-list li .left-icon {
background-color: transparent;
background-repeat: no-repeat;
background-attachment: scroll;
background-image: url(../lib/zTree_v3/css/metroStyle/img/ztree-cl-qunzu.png);
background-image: url(../lib/zTree_v3/css/metroStyle/img/ztree-cl-qunzu.gif);
font-size: 12px;
background-position: -147px -42px;
vertical-align: middle;
line-height: 0;
margin: 0;
padding: 0;
width: 21px;
height: 20px;
line-height: 20px;
float: left;
position: relative;
top: 3px;
margin-right: 3px;
}
.zTreeBlurrySearch {
margin-right: 20px;
}
.del-icon{
font-size: 18px;
position: relative;
right: 0px;
float: right;
top: 1px;
color: rgb(229,62,49);
}
</style>
</head>
<body class="gtmap">
<div class="gt-body" id="layerBox">
<div class="gtmap-body ">
<div class="gt-position-left">
<div class="tree-container">
<!--<div class="tree-cnt">-->
<div class="zTreeBlurrySearch" id="zTreeSearch">
<div class="input-icon-box-right input-icon-box-sm">
<input id="key" name="" placeholder="请输入检索内容" autocomplete="off" class="layui-input">
<i class="layui-icon layui-icon-search"></i>
</div>
</div>
<ul id="treeDemo" class="ztree userTreeColor"></ul>
</div>
</div>
<div class="gtmap-cnt gt-position-right" style="background-color: white;">
<div class="top-container">
<div class="tree-container">
<div class="zTreeBlurrySearch" id="orgZTreeSearch">
<div class="input-icon-box-right input-icon-box-sm">
<input id="orgKey" name="" placeholder="请输入检索内容" autocomplete="off" class="layui-input">
<i class="layui-icon layui-icon-search"></i>
</div>
</div>
<ul id="orgTreeDemo" class="ztree userTreeColor"></ul>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="../lib/layui/layui.js"></script>
<!--加载ztree-->
<script type="text/javascript" src="../lib/zTree_v3/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../lib/zTree_v3/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="../lib/zTree_v3/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="../lib/zTree_v3/js/jquery.ztree.exedit.js"></script>
<script type="text/javascript" src="../lib/zTree_v3/js/jquery.ztree.exhide.js"></script>
<script src="../lib/zTree_v3/js/fuzzysearch.js" type="text/javascript" charset="utf-8"></script>
<script>
// 先取到ztree要用的jquery
var ztreeS = $;
// 定义初始右树的数据
var orgStr = '';
var orgSelectedNodesId = [];
//树形配置
var setting = {
check: {
enable: true//checkbox
},
view: {
nameIsHTML: true, //允许name支持html
selectedMulti: false
},
edit: {
enable: false,
editNameSelectAll: false
},
data: {
simpleData: {
enable: true
}
},
callback: {
onCheck: zTreeOnCheck
}
};
// 树形配置
var orgSetting = {
view: {
nameIsHTML: true, //允许name支持html
selectedMulti: false
},
edit: {
enable: false,
showRenameBtn:false,
},
data: {
simpleData: {
enable: true
}
},
callback: {
onNodeCreated: orgzTreeOnNodeCreated
}
};
//树形的节点数据
var zNodes = [
{id: 1, pId: 0, name: "父节点1", open: true},
{id: 11, pId: 1, name: "内业人员", open: true, type: 0},
{id: 111, pId: 11, name: "叶子节点111", type: 0, chkDisabled:true},
{id: 112, pId: 11, name: "叶子节点112", type: 0, chkDisabled:true},
{id: 113, pId: 11, name: "叶子节点113", type: 0},
{id: 114, pId: 11, name: "叶子节点114", type: 0},
{id: 12, pId: 1, name: "外业人员", open: true, type: 1},
{id: 121, pId: 12, name: "叶子节点121", type: 1, chkDisabled:true},
{id: 122, pId: 12, name: "叶子节点122", type: 1, chkDisabled:true},
{id: 123, pId: 12, name: "叶子节点123", type: 1},
{id: 124, pId: 12, name: "叶子节点124", type: 1}
];
var orgNodes = [
{id: 1, pId: 0, name: "父节点1", open: true},
{id: 11, pId: 1, name: "内业人员", open: true, type: 0},
{id: 111, pId: 11, name: "叶子节点111", type: 0},
{id: 112, pId: 11, name: "叶子节点112", type: 0},
{id: 12, pId: 1, name: "外业人员", open: true, type: 1},
{id: 121, pId: 12, name: "叶子节点121", type: 1},
{id: 122, pId: 12, name: "叶子节点122", type: 1},
];
// 获取某节点下的所有叶子节点
function getAllChildrenNodes(treeNode, result) {
if (treeNode.isParent) {
var childrenNodes = treeNode.children;
if (childrenNodes) {
for (var i = 0; i < childrenNodes.length; i++) {
if (childrenNodes[i].isParent) {
result = getAllChildrenNodes(childrenNodes[i], result);
} else {
result += ',' + childrenNodes[i].id;
}
}
}
}
return result;
}
function zTreeOnCheck(event, treeId, treeNode) {
// alert(treeNode.id + ", " + treeNode.name + "," + treeNode.checked);
// 拿到name值,因为搜索之后匹配字段加样式,获取到的name值不正确,所以要根据id进行匹配
var str = '';
var selectedNodesId = [];
var parentNode = null;
var treeObj = ztreeS.fn.zTree.getZTreeObj("treeDemo");
var orgTreeObj = ztreeS.fn.zTree.getZTreeObj("orgTreeDemo");
str = getAllChildrenNodes(treeNode, str);
selectedNodesId = str.split(',').slice(1);
// 取左侧勾选的列表和右侧初始数据的差集
let intersect = new Set([...new Set(selectedNodesId)].filter(x => !new Set(orgSelectedNodesId).has(x)));// set {2, 3}
selectedNodesId = Array.from(intersect)
console.log(selectedNodesId)
if (treeNode.checked) {
if (!treeNode.isParent){
selectedNodesId.push(treeNode.id);
}
console.log(selectedNodesId);
for (var i = 0; i < selectedNodesId.length; i++) {
var selectedId = selectedNodesId[i];
var selectedName = treeObj.getNodesByParam("id", selectedId)[0].name;
var selectedType = treeObj.getNodesByParam("id", selectedId)[0].type;
console.log(selectedName);
console.log(selectedType);
var newNode = {
id: selectedId,
pId: selectedType,
name: selectedName,
type: selectedType,
showBtn:true
};
if(selectedType == "0"){
parentNode = orgTreeObj.getNodesByParam('name', "内业人员")[0];
}else{
parentNode = orgTreeObj.getNodesByParam('name', "外业人员")[0];
}
orgTreeObj.addNodes(parentNode, newNode);
}
} else {
if (!treeNode.isParent){
selectedNodesId.push(treeNode.id);
}
for (var i = 0; i < selectedNodesId.length; i++) {
var selectedId = selectedNodesId[i];
orgTreeObj.removeNode(orgTreeObj.getNodesByParam("id", selectedId)[0]);
}
}
}
function orgzTreeOnNodeCreated(event, treeId, treeNode) {
if(treeNode.showBtn){
console.log(treeId, treeNode);
var aObj = $("#" + treeNode.tId + "_a");
if ($("#diyBtn_"+treeNode.id).length>0) return;
var editStr = "<span id='diyBtn_space_" +treeNode.id+ "' ><i class='del-icon del-icon-"+ treeNode.id +" layui-icon layui-icon-close-fill '></i></span>"
+ "<button type='button' class='diyBtn1' id='diyBtn_" + treeNode.id
+ "' title='"+treeNode.name+"' onfocus='this.blur();'></button>";
aObj.append(editStr);
var btn = $(".del-icon-"+treeNode.id);
if (btn) btn.bind("click", function(){
var treeObj = ztreeS.fn.zTree.getZTreeObj("treeDemo");
treeObj.checkNode(treeObj.getNodesByParam("id", treeNode.id)[0], false, true);
var orgTreeObj = ztreeS.fn.zTree.getZTreeObj("orgTreeDemo");
orgTreeObj.removeNode(treeNode);
});
}
};
//树形加载
$(document).ready(function () {
ztreeS.fn.zTree.init($("#treeDemo"), setting, zNodes);
fuzzySearch('treeDemo', '#key', null, true); //初始化模糊搜索方法
ztreeS.fn.zTree.init($("#orgTreeDemo"), orgSetting, orgNodes);
fuzzySearch('orgTreeDemo', '#orgKey', null, true); //初始化模糊搜索方法
//获取初始右侧的树的现有数据,防止左侧勾选掉,在勾选的点击事件里去差集
orgTreeObj = ztreeS.fn.zTree.getZTreeObj("orgTreeDemo");
orgStr = getAllChildrenNodes(window.orgTreeObj .getNodes()[0], orgStr);
orgSelectedNodesId = orgStr.split(',').slice(1);
});
</script>
</html>