<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF
-8">
<meta name="viewport" content="width=device
-width, initial
-scale=1
.0">
<title>板材
数据管理</title>
<link href="https://cdn
.jsdelivr
.net/npm/
bootstrap@5
.3
.0/dist/css/
bootstrap.min
.css" rel="stylesheet">
<script src="https://code
.jquery
.com/jquery
-3
.6
.0
.min
.js"></script>
<style type="text/css">
body {
margin: 0;
padding: 0;
overflow: hidden; /* 防止body自带滚动条 */
}
.scroll
-container {
width: 100%;
height: 100vh;
overflow
-y: scroll; /* 启用垂直滚动 */
scrollbar
-width: none; /* Firefox 隐藏滚动条 */
-ms
-overflow
-style: none; /* IE/Edge 隐藏滚动条 */
}
.scroll
-container::
-webkit
-scrollbar {
display: none; /* Chrome/Safari 隐藏滚动条 */
}
</style>
</head>
<body>
<div class="container mt
-4">
<h1 class="mb
-4">板材
数据管理</h1>
<!
-- 搜索框
-->
<div class="row mb
-3">
<div class="col
-md
-6">
<div class="input
-group">
<input type="text" class="form
-control" id="searchInput" placeholder="搜索材质、木皮、厚度或库存
...">
<button class="btn btn
-outline
-secondary" type="button" id="searchBtn">
<i class="bi bi
-search"></i> 搜索
</button>
</div>
</div>
<div class="col
-md
-6 text
-end">
<button class="btn btn
-primary" id="addBancaiBtn">添加新板材</button>
</div>
</div>
<
table class="
table table-striped mt
-3" id="bancai
Table">
<thead>
<tr>
<th>ID</th>
<th>材质</th>
<th>木皮1</th>
<th>木皮2</th>
<th>厚度</th>
<th>库存</th> <!
-- 新增库存列
-->
<th>操作</th>
</tr>
</thead>
<tbody>
<!
-- 数据将通过 DataManager 加载
-->
</tbody>
</
table>
</div>
<!
-- 模态框
-->
<div class="modal fade" id="bancaiModal" tabindex="
-1" aria
-hidden="true">
<div class="modal
-dialog modal
-lg">
<div class="modal
-content">
<div class="modal
-header">
<h5 class="modal
-title" id="modalTitle">板材详情</h5>
<button type="button" class="btn
-close" data
-bs
-dismiss="modal" aria
-label="Close"></button>
</div>
<div class="modal
-body">
<form id="bancaiForm">
<input type="hidden" id="bancaiId">
<div class="mb
-3">
<label class="form
-label">材质</label>
<select class="form
-select" id="caizhiSelect" name="caizhi"></select>
</div>
<div class="mb
-3">
<label class="form
-label">木皮1</label>
<select class="form
-select" id="mupi1Select" name="mupi1"></select>
</div>
<div class="mb
-3">
<label class="form
-label">木皮2</label>
<select class="form
-select" id="mupi2Select" name="mupi2"></select>
</div>
<div class="mb
-3">
<label class="form
-label">厚度</label>
<input type="number" step="0
.01" class="form
-control" id="houdu" name="houdu">
</div>
</form>
</div>
<div class="modal
-footer">
<button type="button" class="btn btn
-secondary" data
-bs
-dismiss="modal">关闭</button>
<button type="button" class="btn btn
-primary" id="saveBtn">保存</button>
</div>
</div>
</div>
</div>
<!
-- 详情模态框
-->
<div class="modal fade" id="detailModal" tabindex="
-1" aria
-hidden="true">
<div class="modal
-dialog modal
-lg">
<div class="modal
-content">
<div class="modal
-header">
<h5 class="modal
-title">板材详情</h5>
<button type="button" class="btn
-close" data
-bs
-dismiss="modal" aria
-label="Close"></button>
</div>
<div class="modal
-body">
<div class="row mb
-4">
<div class="col
-md
-6">
<h5>基本信息</h5>
<
table class="
table table-bordered">
<tr>
<th>ID</th>
<td id="detailId"></td>
</tr>
<tr>
<th>材质</th>
<td id="detailCaizhi"></td>
</tr>
<tr>
<th>木皮1</th>
<td id="detailMupi1"></td>
</tr>
<tr>
<th>木皮2</th>
<td id="detailMupi2"></td>
</tr>
<tr>
<th>厚度</th>
<td id="detailHoudu"></td>
</tr>
<tr>
<th>库存</th>
<td id="detailStock"></td>
</tr>
</
table>
</div>
</div>
<h5>关联订单</h5>
<div class="
table-responsive">
<
table class="
table table-striped" id="relatedOrders">
<thead>
<tr>
<th>订单编号</th>
<th>下单日期</th>
<th>交付日期</th>
<th>关联类型</th>
<th>数量</th>
<th>操作日期</th>
</tr>
</thead>
<tbody>
<!
-- 订单
数据将通过JS填充
-->
</tbody>
</
table>
</div>
</div>
<div class="modal
-footer">
<button type="button" class="btn btn
-secondary" data
-bs
-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
<script src="https://cdn
.jsdelivr
.net/npm/
bootstrap@5
.3
.0/dist/js/
bootstrap.bundle
.min
.js"></script>
<script type="module" src="
../js/bancai
.js"></script>
</body>
</html>还是有上下滚动条
博客指出表格存在列不够的问题，未提及具体解决办法等更多信息。
扫一扫
2804
到【灌水乐园】发言
