最近要对ureport2报表工具做扩展，需要增加下拉选择树，找了一圈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;
}
/* 滑动条 */
.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')">获取选中项</button>
</div>
<!-- 树select1 -->
<div class="ztree-box">
<div class="input-box" onmouseenter="onInputMouseEnter(this)" onmouseleave="onInputMouseLeave(this)">
<input type="text" class="tree-input" placeholder="请选择" 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="请选择" 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>我是页面中其它内容，不要影响到我哦</h2>
<script>
var zTreeObj;
let zTreeSetting = {
view: {
selectedMulti: false,
},
callback: {
onClick: treeNodeClick,
onCheck: treeNodeCheck,
},
check: {
enable: true,
chkboxType: { Y: '', N: '' },
// 如果是单选用下面的选项
// 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) => {
// 如果点击的是树区域，则不做任何处理
const isTreeBoxArea = treeBox === target || treeBox.contains(target);
if (isTreeBoxArea) return;
// 点击的是其他区域，则将下拉树隐藏起来
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);
}
// 鼠标滑过时，如果输入框中有内容，则将删除按钮显示出来
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();
}
}
// 鼠标移出时隐藏删除按钮
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);
// 获取选中的节点
let selectedNodes = zTree.getSelectedNodes();
// 取消选中状态
zTree.cancelSelectedNode(selectedNodes[0]);
// 获取勾选的节点
let checkedNodes = zTree.getCheckedNodes(true);
checkedNodes.forEach((node) => {
zTree.checkNode(node, false, true);
});
}
// 下拉树的显示和隐藏状态
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: '' },
// 如果是单选用下面的选项
chkStyle: 'radio',
radioType: 'all',
};
}
zTreeObj.destroy();
zTreeObj = $.fn.zTree.init($('#treeDemo'), zTreeSetting, zNodes);
}
// 获取树选中数据，这里只是简单的作打印
function getCheckedData(treeId) {
let zTree = $.fn.zTree.getZTreeObj(treeId);
// 获取勾选的节点
let checkedNodes = zTree.getCheckedNodes(true);
checkedNodes.forEach((node) => {
console.log(node);
});
}
</script>
</body>
</html>
ztree-select.gif
如果是表单提交，可以借助隐藏控件比如： <input type="hidden" name="orgId" />来保存选中树节点的id，（上面的示例数据没有配id）
在ureport2报表工具中的效果
image.png
