131 lines
5.1 KiB
HTML
131 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>数据项管理页面</title>
|
|
<!-- 引入Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<!-- 引入自定义样式 -->
|
|
<style>
|
|
.data-table {
|
|
margin-top: 20px;
|
|
}
|
|
.data-table th,
|
|
.data-table td {
|
|
text-align: center;
|
|
}
|
|
.settings-form {
|
|
margin-top: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container mt-5">
|
|
<h1>数据项管理页面</h1>
|
|
|
|
<!-- 数据项列表区域 -->
|
|
<div class="data-table">
|
|
<table class="table table-bordered table-striped" id="data-items-table">
|
|
<thead>
|
|
<tr>
|
|
<th>数据项名称</th>
|
|
<th>数据ID</th>
|
|
<th>数据类型</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- 数据项列表将通过JavaScript动态生成 -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- 添加数据项表单 -->
|
|
<div class="settings-form">
|
|
<form id="add-item-form">
|
|
<div class="mb-3">
|
|
<label for="item-name" class="form-label">数据项名称</label>
|
|
<input type="text" class="form-control" id="item-name" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="item-id" class="form-label">数据ID</label>
|
|
<input type="text" class="form-control" id="item-id" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="item-type" class="form-label">数据类型</label>
|
|
<select class="form-select" id="item-type" required>
|
|
<option value="温度">温度</option>
|
|
<option value="湿度">湿度</option>
|
|
<option value="压力">压力</option>
|
|
<!-- 可以根据需要添加更多选项 -->
|
|
</select>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">添加数据项</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 引入Bootstrap JS和依赖的Popper.js -->
|
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
|
|
<!-- 引入自定义脚本 -->
|
|
<script>
|
|
// 模拟数据项列表
|
|
let dataItems = [
|
|
{ name: '温度', id: '1', type: '温度' },
|
|
{ name: '湿度', id: '2', type: '湿度' },
|
|
{ name: '压力', id: '3', type: '压力' }
|
|
];
|
|
|
|
// 初始化数据项列表
|
|
function initDataItemsTable() {
|
|
const tableBody = document.getElementById('data-items-table').getElementsByTagName('tbody')[0];
|
|
tableBody.innerHTML = '';
|
|
dataItems.forEach(item => {
|
|
const row = tableBody.insertRow();
|
|
row.insertCell(0).textContent = item.name;
|
|
row.insertCell(1).textContent = item.id;
|
|
row.insertCell(2).textContent = item.type;
|
|
const actionsCell = row.insertCell(3);
|
|
actionsCell.innerHTML = `
|
|
<button class="btn btn-warning btn-sm" onclick="editItem('${item.id}')">编辑</button>
|
|
<button class="btn btn-danger btn-sm" onclick="deleteItem('${item.id}')">删除</button>
|
|
`;
|
|
});
|
|
}
|
|
|
|
// 添加数据项
|
|
document.getElementById('add-item-form').addEventListener('submit', function(event) {
|
|
event.preventDefault();
|
|
const itemName = document.getElementById('item-name').value;
|
|
const itemId = document.getElementById('item-id').value;
|
|
const itemType = document.getElementById('item-type').value;
|
|
dataItems.push({ name: itemName, id: itemId, type: itemType });
|
|
initDataItemsTable();
|
|
this.reset();
|
|
});
|
|
|
|
// 编辑数据项
|
|
function editItem(itemId) {
|
|
const item = dataItems.find(item => item.id === itemId);
|
|
if (item) {
|
|
document.getElementById('item-name').value = item.name;
|
|
document.getElementById('item-id').value = item.id;
|
|
document.getElementById('item-type').value = item.type;
|
|
dataItems = dataItems.filter(item => item.id !== itemId);
|
|
initDataItemsTable();
|
|
}
|
|
}
|
|
|
|
// 删除数据项
|
|
function deleteItem(itemId) {
|
|
dataItems = dataItems.filter(item => item.id !== itemId);
|
|
initDataItemsTable();
|
|
}
|
|
|
|
// 初始化数据项列表
|
|
initDataItemsTable();
|
|
</script>
|
|
</body>
|
|
</html> |