124 lines
4.2 KiB
HTML
124 lines
4.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en" xmlns="http://www.w3.org/1999/html">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>团队工程绑定页面</title>
|
||
|
|
<link rel="stylesheet" href="../../layui-v2.8.18/layui/css/layui.css" media="all"/>
|
||
|
|
<link rel="stylesheet" href="../../css/ztree/3.5/zTreeStyle.css" media="all"/>
|
||
|
|
<style>
|
||
|
|
.tree-dropdown {
|
||
|
|
position: relative;
|
||
|
|
width: 200px;
|
||
|
|
}
|
||
|
|
.tree-input {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.tree-content {
|
||
|
|
display: none;
|
||
|
|
position: absolute;
|
||
|
|
top: 30px;
|
||
|
|
left: 0;
|
||
|
|
background-color: #fff;
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
max-height: 200px;
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="layui-form-item" style="height: 100%">
|
||
|
|
<div class="layui-input-block" style="margin-left: 0;display: flex;flex-direction: column;height: 100%">
|
||
|
|
<div class="tree-dropdown">
|
||
|
|
<input id="treeInput" class="tree-input" placeholder="点击输入">
|
||
|
|
<div id="treeDropdown" class="tree-content">
|
||
|
|
<div id="test1" style="max-height: 200px; overflow: auto;"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
<script src="../../js/jquery/jquery-3.6.0.js"></script>
|
||
|
|
<script src="../../layui-v2.8.18/layui/layui.js"></script>
|
||
|
|
<script src="../../css/ztree/3.5/jquery.ztree.all.min.js"></script>
|
||
|
|
<script type="text/javascript" src="../../js/jq.js"></script>
|
||
|
|
<script src="../../js/common_methon.js"></script>
|
||
|
|
<script type="text/javascript" src="../../js/publicJs.js"></script>
|
||
|
|
<script type="text/javascript" src="../../js/select.js"></script>
|
||
|
|
<script type="text/javascript" src="../../js/my/permission.js"></script>
|
||
|
|
<script>
|
||
|
|
var tree
|
||
|
|
var form
|
||
|
|
layui.use(['tree', 'form'], function(){
|
||
|
|
tree = layui.tree;
|
||
|
|
form = layui.form;
|
||
|
|
|
||
|
|
redenTree();
|
||
|
|
|
||
|
|
$('#treeInput').on('click', function(e){
|
||
|
|
$('#treeDropdown').toggle();
|
||
|
|
e.stopPropagation(); // 阻止事件冒泡
|
||
|
|
});
|
||
|
|
|
||
|
|
$('#test1').on('click', '.layui-tree-txt', function(){
|
||
|
|
var nodeName = $(this).text();
|
||
|
|
$('#treeInput').val(nodeName);
|
||
|
|
$('#treeDropdown').hide();
|
||
|
|
});
|
||
|
|
|
||
|
|
$(document).on('click', function(){
|
||
|
|
if (!$(event.target).closest('.tree-dropdown').length) {
|
||
|
|
$('#treeDropdown').hide();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
function redenTree() {
|
||
|
|
$.ajax({
|
||
|
|
type: 'post',
|
||
|
|
url: ctxPath + '/linePro/tree',//数据接口
|
||
|
|
dataType: 'json', // 服务器返回数据类型
|
||
|
|
async: false,
|
||
|
|
data: {
|
||
|
|
keyWord: $("#keyWordPro").val()
|
||
|
|
},
|
||
|
|
success: function (data) {
|
||
|
|
var result = [];
|
||
|
|
for (let i = 0; i < data.length; i++) {
|
||
|
|
if (data[i].level == '1') {
|
||
|
|
data[i].spread = true
|
||
|
|
result.push(data[i])
|
||
|
|
}
|
||
|
|
}
|
||
|
|
for (let i = 0; i < result.length; i++) {
|
||
|
|
result[i].children = []
|
||
|
|
for (let j = 0; j < data.length; j++) {
|
||
|
|
if (result[i].id == data[j].parentId) {
|
||
|
|
result[i].children.push(data[j])
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
tree.render({
|
||
|
|
elem: '#test1'
|
||
|
|
, id: 'test1'
|
||
|
|
, data: result
|
||
|
|
, spread: true
|
||
|
|
, onlyIconControl: false
|
||
|
|
, click: function (obj) {
|
||
|
|
var level = obj.data.level;
|
||
|
|
if (level == '2' && obj.state == 'open') {
|
||
|
|
$("#keyWord").val("");
|
||
|
|
proName = obj.data.title;
|
||
|
|
proId = obj.data.id;
|
||
|
|
showTable("2");
|
||
|
|
markSelectedNode(obj.data.id);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
error: function (err) {
|
||
|
|
console.log("获取工程下拉列表出错：", err);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|