原生html+css+ajax实现二级下拉选择的增删改及树形结构列出

ops/2024/12/12 20:39:18/

 

<?php
$db_host = 'localhost';
$db_user = 'info_chalide';
$db_pass = 'j8c2rRr2RnA';
$db_name = 'info_chalide';
/*
数据库结构SQL
CREATE TABLE categories (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) NOT NULL,
parent_id INT DEFAULT 0
);
*/
try {
$pdo = new PDO("mysql:host=$db_host;dbname=$db_name;charset=utf8mb4", $db_name, $db_pass);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
die("连接失败: " . $e->getMessage());
}
// AJAX处理
if (!empty($_GET['act'])) {
header('Content-Type: application/json');
switch ($_GET['act']) {
case 'list':
// 获取所有类别
try {
$sql = "SELECT * FROM cat ORDER BY parent_id, id";
$stmt = $pdo->query($sql);
$categories = $stmt->fetchAll(PDO::FETCH_ASSOC);
// 组织树形结构
$tree = [];
foreach ($categories as $cat) {
if ($cat['parent_id'] == 0) {
$cat['children'] = [];
$tree[$cat['id']] = $cat;
}
}
foreach ($categories as $cat) {
if ($cat['parent_id'] > 0 && isset($tree[$cat['parent_id']])) {
$tree[$cat['parent_id']]['children'][] = $cat;
}
}
echo json_encode(['status' => 'success', 'data' => array_values($tree)]);
} catch (PDOException $e) {
echo json_encode(['status' => 'error', 'message' => '获取类别失败：' . $e->getMessage()]);
}
break;
case 'add':
if (empty($_POST['name'])) {
echo json_encode(['status' => 'error', 'message' => '类别名称不能为空']);
exit;
}
try {
$name = trim($_POST['name']);
$parent_id = isset($_POST['parent_id']) ? intval($_POST['parent_id']) : 0;
$sql = "INSERT INTO cat (name, parent_id) VALUES (?, ?)";
$stmt = $pdo->prepare($sql);
$stmt->execute([$name, $parent_id]);
echo json_encode(['status' => 'success', 'message' => '添加成功']);
} catch (PDOException $e) {
echo json_encode(['status' => 'error', 'message' => '添加失败：' . $e->getMessage()]);
}
break;
case 'edit':
if (empty($_POST['name']) || empty($_POST['id'])) {
echo json_encode(['status' => 'error', 'message' => '参数错误']);
exit;
}
try {
$name = trim($_POST['name']);
$id = intval($_POST['id']);
$sql = "UPDATE cat SET name = ? WHERE id = ?";
$stmt = $pdo->prepare($sql);
$stmt->execute([$name, $id]);
echo json_encode(['status' => 'success', 'message' => '修改成功']);
} catch (PDOException $e) {
echo json_encode(['status' => 'error', 'message' => '修改失败：' . $e->getMessage()]);
}
break;
case 'delete':
if (empty($_POST['id'])) {
echo json_encode(['status' => 'error', 'message' => '参数错误']);
exit;
}
try {
$id = intval($_POST['id']);
// 删除该类别及其子类别
$sql = "DELETE FROM cat WHERE id = ? OR parent_id = ?";
$stmt = $pdo->prepare($sql);
$stmt->execute([$id, $id]);
echo json_encode(['status' => 'success', 'message' => '删除成功']);
} catch (PDOException $e) {
echo json_encode(['status' => 'error', 'message' => '删除失败：' . $e->getMessage()]);
}
break;
}
exit;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>类别管理</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; padding: 20px; }
/* 树形结构样式 */
.tree-item { margin: 5px 0; }
.tree-item.child { margin-left: 30px; }
.category-name { display: inline-block; border: 1px solid #ddd; min-width: 150px; }
/* 按钮样式 */
button {
padding: 3px 5px;
margin: 0 2px;
cursor: pointer;
border: 1px solid #ddd;
background: #f8f8f8;
border-radius: 3px;
}
button:hover { background: #e8e8e8; }
/* 遮罩层样式 */
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 1000;
}
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 20px;
border-radius: 5px;
min-width: 300px;
max-width: 90%;
max-height: 90vh;
display: flex;
flex-direction: column;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.modal-body {
overflow-y: auto;
margin-bottom: 20px;
}
.modal-footer {
border-top: 1px solid #eee;
padding-top: 15px;
text-align: right;
}
.close-btn {
cursor: pointer;
font-size: 20px;
}
/* 表单样式 */
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
}
.form-group input,
.form-group select {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 3px;
}
</style>
</head>
<body>
<h1>类别管理</h1>
<button onclick="showAddModal()">添加类别</button>
<div id="category-tree"></div>
<!-- 添加/修改类别的遮罩层 -->
<div id="categoryModal" class="overlay">
<div class="modal">
<div class="modal-header">
<h3 id="modalTitle">添加类别</h3>
<span class="close-btn" onclick="closeModal()">&times;</span>
</div>
<div class="modal-body">
<form id="categoryForm">
<input type="hidden" id="categoryId">
<div class="form-group">
<label for="categoryName">类别名称:</label>
<input type="text" id="categoryName" required>
</div>
<div class="form-group" id="parentSelectGroup">
<label for="parentCategory">上级类别:</label>
<select id="parentCategory">
<option value="0">无 (新增一级类别)</option>
</select>
</div>
</form>
</div>
<div class="modal-footer">
<button onclick="closeModal()">取消</button>
<button onclick="saveCategory()">保存</button>
</div>
</div>
</div>
<script>
// 加载类别列表
function loadCategories() {
fetch('?act=list')
.then(response => response.json())
.then(data => {
if (data.status === 'success') {
renderCategoryTree(data.data);
updateParentSelect(data.data);
} else {
alert(data.message);
}
});
}
// 渲染类别树
function renderCategoryTree(categories) {
const tree = document.getElementById('category-tree');
tree.innerHTML = '';
categories.forEach(category => {
// 渲染一级类别
const item = document.createElement('div');
item.className = 'tree-item';
item.innerHTML = `
<span class="category-name">${category.name}</span>
<button onclick="showEditModal(${category.id}, '${category.name}')">修改</button>
<button onclick="deleteCategory(${category.id})">删除</button>
`;
tree.appendChild(item);
// 渲染二级类别
if (category.children && category.children.length > 0) {
category.children.forEach(child => {
const childItem = document.createElement('div');
childItem.className = 'tree-item child';
childItem.innerHTML = `
<span class="category-name">${child.name}</span>
<button onclick="showEditModal(${child.id}, '${child.name}')">修改</button>
<button onclick="deleteCategory(${child.id})">删除</button>
`;
tree.appendChild(childItem);
});
}
});
}
// 更新上级类别选择框
function updateParentSelect(categories) {
const select = document.getElementById('parentCategory');
select.innerHTML = '<option value="0">无 (新增一级类别)</option>';
categories.forEach(category => {
select.innerHTML += `<option value="${category.id}">${category.name}</option>`;
});
}
// 显示添加模态框
function showAddModal() {
document.getElementById('modalTitle').textContent = '添加类别';
document.getElementById('categoryId').value = '';
document.getElementById('categoryName').value = '';
document.getElementById('parentSelectGroup').style.display = 'block';
document.getElementById('categoryModal').style.display = 'block';
}
// 显示编辑模态框
function showEditModal(id, name) {
document.getElementById('modalTitle').textContent = '修改类别';
document.getElementById('categoryId').value = id;
document.getElementById('categoryName').value = name;
document.getElementById('parentSelectGroup').style.display = 'none';
document.getElementById('categoryModal').style.display = 'block';
}
// 关闭模态框
function closeModal() {
document.getElementById('categoryModal').style.display = 'none';
}
// 保存类别
function saveCategory() {
const id = document.getElementById('categoryId').value;
const name = document.getElementById('categoryName').value;
const parent_id = document.getElementById('parentCategory').value;
if (!name) {
alert('请输入类别名称');
return;
}
const formData = new FormData();
formData.append('name', name);
if (id) {
// 修改
formData.append('id', id);
fetch('?act=edit', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.status === 'success') {
closeModal();
loadCategories();
}
alert(data.message);
});
} else {
// 添加
formData.append('parent_id', parent_id);
fetch('?act=add', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.status === 'success') {
closeModal();
loadCategories();
}
alert(data.message);
});
}
}
// 删除类别
function deleteCategory(id) {
if (!confirm('确定要删除该类别吗？此操作无法恢复！')) {
return;
}
const formData = new FormData();
formData.append('id', id);
fetch('?act=delete', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
alert(data.message);
if (data.status === 'success') {
loadCategories();
}
});
}
// 页面加载完成后加载类别列表
window.onload = loadCategories;
</script>
</body>
</html>


http://www.ppmy.cn/ops/141336.html

相关文章

[笔记] 持续一个月的电路调试工作

[笔记] 持续一个月的电路调试工作

11月下旬&#xff0c;入职一家负责系统集成&#xff0c;但是触手已经触及大量的电力电子相关的模块设计的公司。入职时谈及的工作方向有三个&#xff0c;一个是一款手头正在做的开关电源的调优&#xff1b;一个是一款新型PWM移相开关电源的工作&#xff1b;最后一项是我非常期望…
阅读更多...
Cocos创建编辑器扩展的简单介绍

Cocos创建编辑器扩展的简单介绍

&#xff08;一&#xff09; 创建一个扩展的入口&#xff0c;点击之后会弹出面板&#xff0c;我目前只尝试了第一个模板&#xff08;空白&#xff09;&#xff0c;在里面写下扩展名&#xff08;扩展名不能有大写字母&#xff09;&#xff0c;作者等等信息之后 点击创建扩…
阅读更多...
渗透利器-kali工具 (第四章-5) 爬虫入门

渗透利器-kali工具 (第四章-5) 爬虫入门

Python爬虫入门[spider] 1&#xff0c;交换机制&#xff1a; 服务器与本地的交换机制&#xff1a; http协议&#xff1a;客户端与服务器一种会话的方式。 客户端-------[requests[请求]]------->服务器 客户端-------[response[响应]]------>服务器 HTTP请求&#xff1a…
阅读更多...
【HarmonyOS实战开发】鸿蒙JS崩溃分析

【HarmonyOS实战开发】鸿蒙JS崩溃分析

当未处理的JS异常导致应用意外退出时&#xff0c;应用会生成对应的JS崩溃日志文件&#xff0c;开发者可通过错误日志查看引起崩溃的代码位置及分析应用崩溃的原因。本文将分别介绍JS崩溃分析思路以及典型分析案例。 一、日志信息 以下是崩溃日志信息中对应字段解释。 Device…
阅读更多...
F5-TTS文本语音合成模型的使用和接口封装

F5-TTS文本语音合成模型的使用和接口封装

F5-TTS文本语音生成模型 1. F5-TTS的简介 2024年10月8日&#xff0c;上海交通大学团队发布&#xff0c;F5-TTS (A Fairytaler that Fakes Fluent and Faithful Speech with Flow Matching) 是一款基于扩散Transformer和ConvNeXt V2的文本转语音 (TTS) 模型。F5-TTS旨在生成流…
阅读更多...
go语言的成神之路-筑基篇-gin常用功能

go语言的成神之路-筑基篇-gin常用功能

第一节-gin参数绑定 目录 第一节-?gin参数绑定 ShouldBind简要概述 功能&#xff1a; 使用场景&#xff1a; 可能的错误&#xff1a; 实例代码 效果展示 第二节-gin文件上传 选择要上传的文件 选择要上传的文件。 效果展示? 代码部分 第三节-gin请求重定向 第…
阅读更多...
MATLAB 点云生成凸包，计算表面积和体积（94）

MATLAB 点云生成凸包，计算表面积和体积（94）

MATLAB 点云生成凸包，计算表面积和体积（94） 一、算法介绍二、算法实现1.代码2.结果一、算法介绍 利用点云生成了三维凸包，并且计算了凸包的表面积和体积等有用信息，下面是具体的实现代码和计算结果 二、算法实现 1.代码 代码如下（示例）： % 加载点云数据 input_cl…
阅读更多...
《探索形象克隆：科技与未来的奇妙融合》

《探索形象克隆：科技与未来的奇妙融合》

目录 一、什么是形象克隆 二、形象克隆的技术原理 三、形象克隆的发展现状 四、形象克隆的未来趋势 五、形象克隆的应用场景 六、形象克隆简单代码案例 Python 实现数字人形象克隆 Scratch 实现角色克隆效果&#xff08;以猫为例&#xff09; JavaScript 实现 Scratc…
阅读更多...
最新文章

Copyright @ 2022~2023