仅作记录
<!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"/>
<link rel="stylesheet" type="text/css" href="../css/new-public.css"/>
<style type="text/css">
.gt-body {
height: 100%;
padding: 0;
}
.gt-header {
font-size: 18px;
text-align: center;
}
.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%;
}
.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;
}
</style>
</head>
<body class="gtmap">
<div class="gt-body">
<div class="gt-toolbar gt-header">
添加人员
</div>
<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">
<div class="tree-container list-container">
<p class="tip-info">已选择了<span>0</span>个联系人</p>
<ul class="person-list"> 无数据 </ul>
</div>
</div>
</div>
</div>
</body>
<script type="text/html" id="listTpl">
<p class="tip-info">已选择了<span>{{d.length}}</span>个联系人</p>
<ul class="person-list">
{{# layui.each(d, function(index, item){ }}
<li data-id="{{item.id}}">
<i class="left-icon"></i>
<span>{{item.name}}</span>
<i class="layui-icon layui-icon-close-fill delete-icon"></i>
</li>
{{# }); }}
{{# if(d.length === 0){ }}
无数据
{{# } }}
</ul>
</script>
<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 = $;
layui.use(['jquery', 'form', 'laypage', 'laytpl', 'element'], function () {
var form = layui.form,
laypage = layui.laypage,
laytpl = layui.laytpl,
element = layui.element,
$ = layui.jquery;
// 定义右侧列表渲染的数组
var renderArr = [];
//树形配置
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 zNodes = [
{id: 1, pId: 0, name: "父节点1", open: true},
{id: 11, pId: 1, name: "父节点11", open: true},
{id: 111, pId: 11, name: "叶子节点111"},
{id: 112, pId: 11, name: "叶子节点112"},
{id: 113, pId: 11, name: "叶子节点113"},
{id: 114, pId: 11, name: "叶子节点114"},
{id: 12, pId: 1, name: "父节点12"},
{id: 121, pId: 12, name: "叶子节点121"},
{id: 122, pId: 12, name: "叶子节点122"},
{id: 123, pId: 12, name: "叶子节点123"},
{id: 124, pId: 12, name: "叶子节点124"},
{id: 13, pId: 1, name: "父节点13"},
{id: 2, pId: 0, name: "父节点2"},
{id: 21, pId: 2, name: "父节点21", open: true},
{id: 211, pId: 21, name: "叶子节点211"},
{id: 212, pId: 21, name: "叶子节点212"},
{id: 213, pId: 21, name: "叶子节点213"},
{id: 214, pId: 21, name: "叶子节点214"},
{id: 22, pId: 2, name: "父节点22"},
{id: 221, pId: 22, name: "叶子节点221"},
{id: 222, pId: 22, name: "叶子节点222"},
{id: 223, pId: 22, name: "叶子节点223"},
{id: 224, pId: 22, name: "叶子节点224"},
{id: 23, pId: 2, name: "父节点23"},
{id: 231, pId: 23, name: "叶子节点231"},
{id: 232, pId: 23, name: "叶子节点232"},
{id: 233, pId: 23, name: "叶子节点233"},
{id: 234, pId: 23, name: "叶子节点234"},
{id: 3, pId: 0, name: "父节点3"}
];
// 获取某节点下的所有叶子节点
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 = [];
if (treeNode.checked) {
if (treeNode.isParent) {
str = getAllChildrenNodes(treeNode, str);
selectedNodesId = str.split(',');
selectedNodesId = selectedNodesId.slice(1);
} else {
selectedNodesId.push(treeNode.id)
}
for (var i = 0; i < selectedNodesId.length; i++) {
var selectedId = selectedNodesId[i];
var selectedName = zNodes.filter(function (v) {
return v.id == selectedId
})[0].name;
renderArr.push({
id: selectedId,
name: selectedName
})
}
} else {
if (treeNode.isParent) {
str = getAllChildrenNodes(treeNode, str);
selectedNodesId = str.split(',');
selectedNodesId = selectedNodesId.slice(1);
} else {
selectedNodesId.push(treeNode.id)
}
for (var i = 0; i < selectedNodesId.length; i++) {
var selectedId = selectedNodesId[i];
var index = renderArr.indexOf(renderArr.filter(function (v) {
return v.id == selectedId
})[0]);
renderArr.splice(index, 1);
}
}
console.log(renderArr)
laytpl($('#listTpl').html()).render(renderArr, function (html) {
$('.list-container').html(html);
})
}
$(document).on('click', '.delete-icon', function () {
// 更新右侧列表
var dataId = $(this).parent().attr('data-id');
var index = renderArr.indexOf(renderArr.filter(function (v) {
return v.id == dataId
})[0]);
renderArr.splice(index, 1);
laytpl($('#listTpl').html()).render(renderArr, function (html) {
$('.list-container').html(html);
})
// 更新左侧树
var treeObj = ztreeS.fn.zTree.getZTreeObj("treeDemo");
function filter(node) {
return (node.id == dataId);
}
var node = treeObj.getNodesByFilter(filter, true); // 仅查找一个节点
treeObj.checkNode(node, false, true, false)
})
//树形加载
$(document).ready(function () {
ztreeS.fn.zTree.init($("#treeDemo"), setting, zNodes);
fuzzySearch('treeDemo', '#key', null, true); //初始化模糊搜索方法
});
});
</script>
</html>