最近要對(duì)ureport2報(bào)表工具做擴(kuò)展，需要增加下拉選擇樹，找了一圈jquery的插件，沒找到好用的，所以使用ztree模擬下拉選擇樹
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>zTree下拉選擇樹</title>
<script src="js/jquery.min.js"></script>
<script src="js/zTree/jquery.ztree.all.min.js"></script>
<link rel="stylesheet" href="js/zTree/zTreeStyle/zTreeStyle.css" />
<style>
.mode-choose {
padding: 20px;
border: 1px solid #ccc;
margin-bottom: 20px;
}
.btn {
border: 1px solid #409eff;
padding: 4px 10px;
border-radius: 4px;
cursor: pointer;
}
.btn:hover {
background-color: #fff;
}
.btn,
.btn:focus {
outline: none;
}
/* 樹選擇器樣式 */
.ztree-box {
position: relative;
width: 190px;
}
.ztree-box .input-box {
position: relative;
width: 100%;
height: 30px;
border: 1px solid #dcdfe6;
border-radius: 4px;
box-sizing: border-box;
cursor: pointer;
display: flex;
align-items: center;
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.ztree-box .tree-input {
width: 0;
flex: 1;
border: none;
background: none;
height: 28px;
line-height: 28px;
outline: none;
padding: 0 20px 0 10px;
box-sizing: border-box;
}
.ztree-box .input-box:hover,
.ztree-box .input-box:focus {
border-color: #409eff;
}
.input-box .input-delete-icon {
position: absolute;
right: 4px;
top: 6px;
width: 16px;
height: 16px;
background: url(./js/zTree/zTreeStyle/img/delete.png) no-repeat;
display: none;
}
.ztree-container {
width: 100%;
box-sizing: border-box;
position: absolute;
left: 0;
top: 32px;
border: 1px solid #ccc;
max-height: 250px;
overflow: auto;
border-radius: 4px;
background-color: #fff;
z-index: 10;
}
.ztree-container.tree-hide {
display: none;
}
/* 滑動(dòng)條 */
.ztree-container::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.ztree-container::-webkit-scrollbar-thumb {
background-color: #cccccc;
border-radius: 6px;
}
.ztree-container::-webkit-scrollbar-track-piece {
background-color: transparent;
border-radius: 6px;
}
</style>
</head>
<body>
<div class="mode-choose">
樹1選中模式：<label><input type="radio" name="mode" checked onclick="resetTree('checkbox')" />checkbox</label>
<label><input type="radio" name="mode" onclick="resetTree('radio')" />radio</label>
<button class="btn" onclick="getCheckedData('treeDemo')">獲取選中項(xiàng)</button>
</div>
<!-- 樹select1 -->
<div class="ztree-box">
<div class="input-box" onmouseenter="onInputMouseEnter(this)" onmouseleave="onInputMouseLeave(this)">
<input type="text" class="tree-input" placeholder="請(qǐng)選擇" readonly onclick="toggleTree(this)" />
<div class="input-delete-icon" onclick="clearTreeInput(this, 'treeDemo')"></div>
</div>
<div class="ztree-container tree-hide">
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
<!-- 樹select2 -->
<div class="ztree-box">
<div class="input-box" onmouseenter="onInputMouseEnter(this)" onmouseleave="onInputMouseLeave(this)">
<input type="text" class="tree-input" placeholder="請(qǐng)選擇" readonly onclick="toggleTree(this)" />
<div class="input-delete-icon" onclick="clearTreeInput(this, 'treeDemo2')"></div>
</div>
<div class="ztree-container tree-hide">
<ul id="treeDemo2" class="ztree"></ul>
</div>
</div>
<h2>我是頁面中其它內(nèi)容，不要影響到我哦</h2>
<script>
var zTreeObj;
let zTreeSetting = {
view: {
selectedMulti: false,
},
callback: {
onClick: treeNodeClick,
onCheck: treeNodeCheck,
},
check: {
enable: true,
chkboxType: { Y: '', N: '' },
// 如果是單選用下面的選項(xiàng)
// chkStyle: 'radio',
// radioType: 'all',
},
};
var zNodes = [
{ name: 'test1', open: true, children: [{ name: 'test1_1' }, { name: 'test1_2' }] },
{ name: 'test2', open: true, children: [{ name: 'test2_1' }, { name: 'test2_2' }] },
{ name: 'test3', open: true, children: [{ name: 'test3_1' }, { name: 'test3_2' }] },
{ name: 'test4', open: true, children: [{ name: 'test4_1' }, { name: 'test4_2' }] },
{ name: 'test5', open: true, children: [{ name: 'test5_1' }, { name: 'test5_2' }] },
];
$(document).ready(function () {
zTreeObj = $.fn.zTree.init($('#treeDemo'), zTreeSetting, zNodes);
$.fn.zTree.init($('#treeDemo2'), zTreeSetting, zNodes);
document.addEventListener('click', function (evt) {
const treeBoxes = document.querySelectorAll('.ztree-box');
if (treeBoxes && treeBoxes.length) {
const target = evt.target;
treeBoxes.forEach((treeBox) => {
// 如果點(diǎn)擊的是樹區(qū)域，則不做任何處理
const isTreeBoxArea = treeBox === target || treeBox.contains(target);
if (isTreeBoxArea) return;
// 點(diǎn)擊的是其他區(qū)域，則將下拉樹隱藏起來
const treeContainer = treeBox.querySelector('.ztree-container');
const flag = treeContainer.classList.contains('tree-hide');
if (!flag) {
treeContainer.classList.add('tree-hide');
}
});
}
});
});
function treeNodeClick(e, treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj(treeId);
zTree.checkNode(treeNode, !treeNode.checked, null, true);
return false;
}
function treeNodeCheck(e, treeId, treeNode) {
let zTree = $.fn.zTree.getZTreeObj(treeId),
nodes = zTree.getCheckedNodes(true),
v = '';
for (let i = 0, l = nodes.length; i < l; i++) {
v += nodes[i].name + ',';
}
if (v.length > 0) v = v.substring(0, v.length - 1);
let parent = $(`#${treeId}`).closest('.ztree-box');
let treeInput = parent.find('.tree-input');
treeInput.val(v);
}
// 鼠標(biāo)滑過時(shí)，如果輸入框中有內(nèi)容，則將刪除按鈕顯示出來
function onInputMouseEnter(obj) {
let parent = $(obj).closest('.ztree-box');
let treeInput = parent.find('.tree-input');
const val = treeInput.val();
if (val) {
const deleteIcon = parent.find('.input-delete-icon');
deleteIcon.show();
}
}
// 鼠標(biāo)移出時(shí)隱藏刪除按鈕
function onInputMouseLeave(obj) {
let parent = $(obj).closest('.ztree-box');
const deleteIcon = parent.find('.input-delete-icon');
deleteIcon.hide();
}
// 清空input輸入框
function clearTreeInput(deleteIcon, treeId) {
const parent = $(deleteIcon).closest('.ztree-box');
const treeInput = parent.find('.tree-input');
treeInput.val('');
$(deleteIcon).hide();
let zTree = $.fn.zTree.getZTreeObj(treeId);
// 獲取選中的節(jié)點(diǎn)
let selectedNodes = zTree.getSelectedNodes();
// 取消選中狀態(tài)
zTree.cancelSelectedNode(selectedNodes[0]);
// 獲取勾選的節(jié)點(diǎn)
let checkedNodes = zTree.getCheckedNodes(true);
checkedNodes.forEach((node) => {
zTree.checkNode(node, false, true);
});
}
// 下拉樹的顯示和隱藏狀態(tài)
function toggleTree(obj) {
const parent = $(obj).closest('.ztree-box');
const treeContainer = parent.find('.ztree-container')[0];
const flag = treeContainer.classList.contains('tree-hide');
if (flag) {
treeContainer.classList.remove('tree-hide');
} else {
treeContainer.classList.add('tree-hide');
}
}
// 切換選中模式
function resetTree(mode) {
$('.tree-input').val('');
if (mode === 'checkbox') {
zTreeSetting.check = {
enable: true,
chkboxType: { Y: '', N: '' },
};
} else {
zTreeSetting.check = {
enable: true,
chkboxType: { Y: '', N: '' },
// 如果是單選用下面的選項(xiàng)
chkStyle: 'radio',
radioType: 'all',
};
}
zTreeObj.destroy();
zTreeObj = $.fn.zTree.init($('#treeDemo'), zTreeSetting, zNodes);
}
// 獲取樹選中數(shù)據(jù)，這里只是簡單的作打印
function getCheckedData(treeId) {
let zTree = $.fn.zTree.getZTreeObj(treeId);
// 獲取勾選的節(jié)點(diǎn)
let checkedNodes = zTree.getCheckedNodes(true);
checkedNodes.forEach((node) => {
console.log(node);
});
}
</script>
</body>
</html>
ztree-select.gif
如果是表單提交，可以借助隱藏控件比如： <input type="hidden" name="orgId" />來保存選中樹節(jié)點(diǎn)的id，（上面的示例數(shù)據(jù)沒有配id）
在ureport2報(bào)表工具中的效果
image.png
