<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CAD属性块分类树状视图</title>
<style>
/* 禁用整个页面的滚动条 */
html, body {
margin
: 0;
padding
: 0;
height
: 100%;
width
: 100%;
overflow: hidden;
font-family
: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
white-space
: nowrap;
}
/* 主容器 - 固定宽度避免闪烁 */
.container {
display
: flex;
flex-direction
: column;
height
: 100vh;
width
: 100vw;
max-width
: 100vw;
overflow: hidden;
background-color
: rgba(255, 255, 255, 0.9);
position
: relative;
}
/* 标题样式 */
.header {
background
: linear-gradient(to right, #2c3e50, #4a6491);
color
: white;
padding
: 15px 20px;
text-a
lign
: center;
box-shadow
: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.header h1 {
margin
: 0;
font-size
: 24px;
font-weight
: 600;
}
/* 内容区域 */
.content {
display
: flex;
flex
: 1;
overflow: hidden;
flex-direction
: column;
flex-wrap
: nowrap;
justify-content
: flex-start;
}
.icon {
color
: #f1c40f;
padding-right
: 3px;
}
/* 树状结构容器 */
.tree-container {
flex
: 1;
background
: rgb(59 68 83);
color
: white;
box-shadow
: 0 2px 10px rgba(0, 0, 0, 0.08);
padding
: 0px 5px 5px 5px;
display
: flex;
flex-direction
: column;
overflow: hidden;
}
/* 树状结构样式 */
.tree {
list-style
: none;
padding
: 0;
margin
: 0;
}
.tree, .tree ul {
list-style
: none;
padding-left
: 25px;
}
.tree
li {
margin
: 2px 0;
position
: relative;
}
.node {
display
: flex;
cursor
: pointer;
transition
: all 0.2s;
background-color
: rgb(0 0 0 / 35%);
flex-direction
: row;
flex-wrap
: nowrap;
justify-content
: flex-start;
white-space
: nowrap;
font-size
: 1rem;
}
.node
:hover {
background-color
: #877739;
}
.toggle {
width
: 20px;
height
: 20px;
margin-right
: 10px;
display
: flex;
a
lign-items
: center;
justify-content
: center;
background-color
: #4a6572;
color
: white;
font-size
: 14px;
cursor
: pointer;
transition
: all 0.2s;
}
.toggle
:hover {
background-color
: #344955;
}
.node-name {
flex
: 1;
color
: white;
}
.node-count {
padding
: 2px 8px;
border-radius
: 10px;
font-size
: 12px;
min-width
: 30px;
text-a
lign
: center;
}
/* 自定义滚动条 */
.tree-scroll {
flex
: 1;
overflow-y
: scroll;
overflow-x
: auto;
padding-right
: 5px;
border
: 1px so
lid rgb(0 0 0);
box-shadow
: 0 1px 1px rgb(59 63 89);
}
/* 自定义滚动条样式 */
.tree-scroll
::-webkit-scrollbar {
width
: 0px;
}
/* 整个水平滚动条容器 */
.tree-scroll
::-webkit-scrollbar
:horizontal {
height
: 10px;
}
.tree-scroll
::-webkit-scrollbar-track {
background
: #f1f1f1;
border-radius
: 1px;
}
/* 水平滚动条轨道 */
.tree-scroll
::-webkit-scrollbar-track
:horizontal {
background
: #f1f1f1; /* 轨道背景色 */
border-radius
: 5px; /* 圆角 */
}
.tree-scroll
::-webkit-scrollbar-thumb {
background
: #a0a0a0;
border-radius
: 1px;
}
/* 水平滚动条滑块 */
.tree-scroll
::-webkit-scrollbar-thumb
:horizontal {
border-radius
: 5px; /* 滑块圆角 */
border
: 1px so
lid #f1f1f1; /* 滑块边框 */
}
.tree-scroll
::-webkit-scrollbar-thumb
:hover {
background
: #808080;
}
/* 鼠标悬停
时滑块样式 */
.tree-scroll
::-webkit-scrollbar-thumb
:horizontal
:hover {
background
: #808080;
}
/* 统计信息面板 */
.stats-panel header {
font-size
: 14px;
color
: white;
border-bottom
: 1px dashed rgb(0 0 0);
}
.stats-panel {
width
: auto;
margin-left
: 0;
margin-top
: 5px;
border
: 1px so
lid rgb(0 0 0);
}
.stat-item {
font-size
: 12px;
display
: flex;
justify-content
: space-between;
border-bottom
: 1px dashed rgb(0 0 0);
flex-direction
: row;
flex-wrap
: nowrap;
text-a
lign
: center;
}
.stat-item
:last-child {
border-bottom
: none;
}
.stat-label {
flex
: 1;
color
: #f1c40f;
display
: flex;
flex-direction
: row;
flex-wrap
: nowrap;
text-a
lign
: center;
justify-content
: flex-start;
a
lign-items
: center;
white-space
: nowrap;
padding-left
: 2px;
border-right
: 1px dashed rgb(0 0 0);
}
.stat-value {
flex
: 1;
color
: #4ec3af;
display
: flex;
white-space
: nowrap;
flex-direction
: row;
flex-wrap
: nowrap;
text-a
lign
: center;
justify-content
: flex-end;
a
lign-items
: center;
padding-right
: 2px;
}
.search-box {
width
: 10%;
position
: relative;
margin-top
: 2px;
border-bottom
: 1px so
lid rgb(0 0 0);
}
.search-box input {
padding
: 0px 15px 0px 5px;
border-radius
: 30px;
font-size
: 14px;
out
line
: none;
transition
: all 0.3s;
}
.search-box input
:focus {
}
.search-icon {
position
: absolute;
left
: 15px;
top
: 50%;
transform
: translateY(-50%);
color
: #7f8c8d;
}
/* 响应式设计 */
@media (max-width
: 768px) {
.content {
flex-direction
: column;
}
}
</style>
</head>
<body>
<
div class="container">
<
div class="content">
<
div class="tree-container">
<
div class="tree-scroll" id="treeScroll">
<ul class="tree" id="treeRoot">
<!-- 树状结构将通过JavaScript动态生成 -->
</ul>
</
div>
<
div class="stats-panel">
<header>属性</header>
<
div class="stat-item">
<span class="stat-label">名称
:</span>
<span class="stat-value" id="att_tag1">气动隔膜阀</span>
</
div>
<
div class="stat-item">
<span class="stat-label">位号
:</span>
<span class="stat-value" id="att_tag2" color>B1TA4001AV101</span>
</
div>
<
div class="stat-item">
<span class="stat-label">设备描述
:</span>
<span class="stat-value" id="att_tag3"></span>
</
div>
<
div class="stat-item">
<span class="stat-label">材质
:</span>
<span class="stat-value" id="att_tag4">文本标注 (5)</span>
</
div>
<
div class="stat-item">
<span class="stat-label">介质名称(中)
:</span>
<span class="stat-value" id="att_tag5">17.75</span>
</
div>
<
div class="stat-item">
<span class="stat-label">介质粘度
:</span>
<span class="stat-value" id="att_tag6">17.75</span>
</
div>
<
div class="stat-item">
<span class="stat-label">介质密度
:</span>
<span class="stat-value" id="att_tag7">17.75</span>
</
div>
<
div class="stat-item">
<span class="stat-label">DOCUMENTNO_1
:</span>
<span class="stat-value" id="att_tag8">17.75</span>
</
div>
<
div class="stat-item">
<span class="stat-label">连接类型
:</span>
<span class="stat-value" id="att_tag7">17.75</span>
</
div>
</
div>
</
div>
</
div>
</
div>
<script>
// CAD属性块数据
const cadData = {
name
: "所有属性块",
count
: 142,
children
: [
{
name
: "机械部件",
count
: 45,
children
: [
{ name
: "齿轮", count
: 12 },
{ name
: "轴承", count
: 18 },
{ name
: "联轴器", count
: 8 },
{ name
: "紧固件", count
: 7 }
]
},
{
name
: "电气元件",
count
: 32,
children
: [
{ name
: "开关", count
: 10 },
{ name
: "继电器", count
: 8 },
{ name
: "变压器", count
: 6 },
{ name
: "连接器", count
: 8 }
]
},
{
name
: "管道系统",
count
: 28,
children
: [
{ name
: "阀门", count
: 9 },
{ name
: "法兰", count
: 7 },
{ name
: "管接头", count
: 8 },
{ name
: "过滤器", count
: 4 }
]
},
{
name
: "结构组件",
count
: 22,
children
: [
{ name
: "梁", count
: 8 },
{ name
: "柱", count
: 7 },
{ name
: "支架", count
: 5 },
{ name
: "底座", count
: 2 }
]
},
{
name
: "注释符号",
count
: 15,
children
: [
{ name
: "尺寸标注", count
: 6 },
{ name
: "表面粗糙度", count
: 4 },
{ name
: "焊接符号", count
: 3 },
{ name
: "形位公差", count
: 2 }
]
}
]
};
// 搜索功能
function setupSearch() {
const searchInput = document.getElementById('searchInput');
searchInput.addEvent
Listener('input', function() {
const searchTerm = this.value.toLowerCase().trim();
const allLeafNodes = document.querySelectorAll('.tree-scroll');
// 重置所有样式
allLeafNodes.forEach(node => {
node.class
List.remove('high
light');
node.style.display = '';
});
// 如果没有搜索词，显示所有节点
if (searchTerm === '') {
// 展开所有节点
document.querySelectorAll('node').forEach(detail => {
detail.open = false;
});
return;
}
// 搜索匹配项并高亮显示
let found = false;
allLeafNodes.forEach(node => {
const itemName = node.querySelector('.item-name').textContent.toLowerCase();
if (itemName.includes(searchTerm)) {
node.class
List.add('high
light');
found = true;
// 展开父节点
let parent = node.closest('details');
while (parent) {
parent.open = true;
parent = parent.parentElement.closest('details');
}
} else {
node.style.display = 'none';
}
});
if (!found) {
// 如果没有找到匹配项，显示所有节点
allLeafNodes.forEach(node => {
node.style.display = '';
});
}
});
}
// 生成树状结构
function generateTree(data, parentElement) {
const
li = document.createElement('
li');
const node = document.createElement('
div');
node.className = 'node';
const toggle = document.createElement('
div');
toggle.className = 'toggle';
toggle.textContent = '➕';
const icon = document.createElement('
div');
icon.className = 'icon';
icon.textContent = '👮';
const nameSpan = document.createElement('span');
nameSpan.className = 'node-name';
nameSpan.textContent = data.name;
const countSpan = document.createElement('span');
countSpan.className = 'node-count';
countSpan.textContent = data.count;
node.appendChild(icon);
node.appendChild(nameSpan);
node.appendChild(countSpan);
node.appendChild(toggle);
li.appendChild(node);
if (data.children && data.children.length > 0) {
const childUl = document.createElement('ul');
data.children.forEach(child => {
generateTree(child, childUl);
});
li.appendChild(childUl);
// 添加展开/折叠事件
toggle.addEvent
Listener('c
lick', function(e) {
e.stopPropagation();
const isExpanded = childUl.style.display !== 'none';
if (isExpanded) {
childUl.style.display = 'none';
toggle.textContent = '➕';
node.class
List.remove('expanded');
} else {
childUl.style.display = 'block';
toggle.textContent = '➖';
node.class
List.add('expanded');
}
});
// 初始折叠状态
childUl.style.display = 'none';
} else {
toggle.style.visibi
lity = '
hidden';
}
parentElement.appendChild(
li);
}
// 初始化树状视图
document.addEvent
Listener('DOMContentLoaded', function() {
const treeRoot = document.getElementById('treeRoot');
generateTree(cadData, treeRoot);
});
</script>
</body>
</html>
帮我修改这个代码，要求在树容器顶部加一个搜索框，只要根据输入内容在树节点中搜到结果，就会展开对应节点且高亮显示搜索结果
博客提及div相关内容，关键信息为overflow:hidden，这是前端开发中用于处理元素溢出的样式设置。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
