<!DOCTYPE html>
<html lang="en" xmlns:th="http://www
.thymeleaf
.org">
<head>
<meta charset="UTF-8">
<title>积分商城网厅常见问题分类配置</title>
<script src="
../js/
jquery-1
.min
.js"></script>
<script src="
../js/bootstrap
.min
.js"></script>
<link href="
../css/bootstrap
.min
.css" rel="stylesheet">
<script src="
../js/lay
.js"></script>
<!--
添加 TinyMCE 引用 -->
<script src="
../js/tinymce/tinymce
.min
.js"></script>
<style>
/*
添加编辑器样式调整 */
.tox-tinymce {
border-radius: 4px !important;
border: 1px solid #dcdfe6 !important;
}
/* 隐藏原始文本区域 */
#content {
display: none;
}
</style>
</head>
<style>
body {
font-family: "Microsoft YaHei", Arial, sans-serif;
max-width: 1400px;
margin: 30px auto;
padding: 20px;
background-color: #f8f9fa;
}
.hidden-id {
display: none;
}
.form-container {
background-color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 0 2px 12px rgba
(0,0,0,0
.08
);
}
.form-section {
border: 1px solid #ebeef5;
padding: 20px;
margin-bottom: 25px;
border-radius: 8px;
background: #fafafa;
}
.form-section h3 {
color: #409eff;
margin: 0 0 20px 0;
padding-bottom: 10px;
border-bottom: 1px solid #ebeef5;
font-size: 16px;
}
.table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
.table th,
.table td {
padding: 12px 15px;
border: 1px solid #ddd;
text-align: left;
}
.table th {
background-color: #f5f5f5;
font-weight: 600;
}
.table tr:nth-child
(even
) {
background-color: #f9f9f9;
}
.table tr:hover {
background-color: #f1f1f1;
}
.btn {
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
border: none;
transition: all 0
.3s;
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn-primary {
background-color: #409eff;
color: white;
}
.btn-primary:hover {
background-color: #66b1ff;
}
.btn-success {
background-color: #67c23a;
color: white;
}
.btn-success:hover {
background-color: #85ce61;
}
.btn-danger {
background-color: #f56c6c;
color: white;
}
.btn-danger:hover {
background-color: #f78989;
}
.btn-sm {
padding: 4px 8px;
font-size: 12px;
}
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba
(0,0,0,0
.4
);
}
.modal-content {
background-color: #fefefe;
margin: 10% auto;
padding: 20px;
border: 1px solid #888;
width: 50%;
border-radius: 8px;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
.close:hover {
color: black;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: 600;
color: #606266;
}
.form-control {
width: 100%;
padding: 8px 12px;
border: 1px solid #dcdfe6;
border-radius: 4px;
box-sizing: border-box;
}
textarea
.form-control {
height: auto;
min-height: 100px;
}
.required label::before {
content: "*";
color: #f56c6c;
margin-right: 4px;
}
.child-node {
padding-left: 30px;
background-color: #f9f9f9;
vertical-align: middle;
}
.submit-btn {
display: block;
width: 200px;
margin: 20px auto 0;
padding: 10px;
background: #409eff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: all 0
.3s;
}
.submit-btn:hover {
background: #66b1ff;
}
.action-buttons {
text-align: left; /* 内容左对齐 */
}
.action-buttons button {
display: inline-block;
margin-right: 5px; /* 按钮之间的间距 */
vertical-align: middle; /* 垂直居中 */
}
.table th:nth-child
(4
),
.table td:nth-child
(4
) {
width: 15%; /* 与表头设置一致 */
min-width: 180px; /* 设置最小宽度防止内容挤压 */
white-space: nowrap; /* 防止内容换行 */
}
</style>
<body>
<div class="form-container">
<div class="form-section">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
<h3 style="margin: 0 auto;">常见问题分类配置</h3>
<button id="addTopCategory" class="btn btn-primary">
添加一级分类</button>
</div>
<table class="table" id="categoryTable">
<thead>
<tr>
<th width="15%">分类名称</th>
<th width="50%">分类内容</th>
<th width="5%">排序</th>
<th width="30%">操作</th>
</tr>
</thead>
<tbody id="category
List">
<!--
动态加载
数据 -->
</tbody>
</table>
</div>
</div>
<!--
添加/编辑分类的模态框 -->
<div id="categoryModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h3 id="modalTitle">
添加分类</h3>
<form id="categoryForm" novalidate>
<input type="hidden" id="id" name="id">
<input type="hidden" id="pid" name="pid" value="0">
<div class="form-group required">
<label for="name">分类名称:</label>
<input type="text" class="form-control" id="name" name="name" placeholder="请输入分类名称,同级别不允许重复" required>
</div>
<div class="form-group required" id="contentGroup">
<label for="content">分类内容:</label>
<textarea class="form-control" id="content" name="content" placeholder="请输入分类描述" required></textarea>
</div>
<div class="form-group required">
<label for="orderNum">排序顺序:
<span style="color: #888; font-size: 12px; margin-left: 5px;">
值越小越靠前，请输入正整数</span>
</label>
<input type="number" class="form-control" id="orderNum" name="orderNum" placeholder="请输入分类排序,同级别不允许重复" required min="1" step="1">
</div>
<button type="submit" class="submit-btn">保存</button>
</form>
</div>
</div>
<script>
//
动态设置 required 的函数
function setContentRequired
(required
) {
if
(required
) {
$('#content'
).attr
('required', 'required'
);
$("#contentGroup"
).removeClass
("hidden"
);
tinymce
.get
('content'
).show
();
$('#content'
).css
({visibility: 'visible', position: 'static'}
); // 移除隐藏样式
} else {
$('#content'
).removeAttr
('required'
);
$("#contentGroup"
).addClass
("hidden"
);
tinymce
.get
('content'
).hide
();
$('#content'
).css
({visibility: 'hidden', position: 'absolute', left: '-9999px'}
); // 恢复隐藏样式
}
}
$(document
).ready
(function() {
// 初始化 TinyMCE
tinymce
.init
({
license_key: 'gpl', // 对于GPL许可证
selector: '#content',
language: 'zh_CN',
language_url: '
../js/tinymce/langs/zh_CN
.js',
height: 300,
plugins: 'link
lists image table code help wordcount',
toolbar: 'undo redo | formatselect | image | bold italic | alignleft aligncenter alignright | bul
list num
list outdent indent | link image | code help',
images_upload_url: '
../point/uploadFileNew?limit=010',
images_upload_handler:
function (blobInfo, progress
) {
return new Promise
((resolve, reject
) => {
const formData = new FormData
();
formData
.append
('file', blobInfo
.blob
(), blobInfo
.filename
());
// 显示上传进度
progress
(0
);
$.ajax
({
url: tinymce
.activeEditor
.settings
.images_upload_url,
type: 'POST',
data: formData,
processData: false,
contentType: false,
xhr:
function() {
const xhr =
$.ajaxSettings
.xhr
();
if
(xhr
.upload
) {
xhr
.upload
.addEvent
Listener
('progress',
function(e
) {
if
(e
.lengthComputable
) {
progress
((e
.loaded / e
.total
) * 100
);
}
}
);
}
return xhr;
},
success:
function(response
) {
if
(response
.state === '200'
) {
resolve
(response
.filePath
); // 传递图片 URL 给编辑器
} else {
$.MsgBox
.Alert
("上传失败", response
.msg || "未知错误"
);
reject
(response
.msg
);
}
},
error:
function(xhr
) {
$.MsgBox
.Alert
("上传失败", "网络错误：" + xhr
.statusText
);
reject
("网络错误：" + xhr
.statusText
);
}
}
);
}
);
},
skin: 'oxide',
content_css: 'default',
menubar: false,
branding: false,
relative_urls: false,
remove_script_host: false,
setup:
function(editor
) {
editor
.on
('init',
function() {
console
.log
('TinyMCE 初始化成功'
);
}
);
editor
.on
('error',
function(e
) {
console
.error
('TinyMCE 错误:', e
);
}
);
editor
.on
('change',
function() {
// 内容变化时的逻辑（如实时保存）
}
);
},
valid_elements: 'p,br,strong/b,em/i,u,ol,ul,li,h1,h2,h3,h4,a[href|target=_blank],img[src|alt|title|width|height|class]',
valid_children: '-p[strong/b|em/i|u|a|img],-li[p|ol|ul]',
extended_valid_elements: '',
invalid_elements: 'script,iframe,object,embed,form,input,textarea,button,select,option,style',
content_security_policy: "default-src 'self'; img-src 'self' data:; media-src 'none'; script-src 'none';",
forced_root_block: 'p',
force_br_newlines: false,
convert_newlines_to_brs: false,
remove_linebreaks: false,
// 允许的CSS类
valid_classes: {
'*': 'text-left,text-center,text-right,text-justify'
},
// 粘贴过滤设置
paste_as_text: false,
paste_postprocess:
function(editor, node
) {
// 额外的粘贴后处理
},
init_instance_callback:
function(editor
) {
console
.log
('Editor完全初始化完成:', editor
.id
);
}
}
);
// 加载分类
数据
loadCategoryData
();
// 打开
添加一级分类模态框
$("#addTopCategory"
).click
(function() {
$("#modalTitle"
).text
("
添加一级分类"
);
$("#categoryForm"
)[0]
.reset
();
$("#id"
).val
(""
);
$("#pid"
).val
("0"
);
$("#content"
).removeAttr
("required"
);
$("#contentGroup"
).addClass
("hidden"
);
tinymce
.get
('content'
).hide
();
$("#categoryModal"
).show
();
setContentRequired
(false
);
}
);
//
添加 orderNum 输入限制
$("#orderNum"
).on
('input',
function() {
let value = parseInt
($(this
).val
()) || 0;
if
(value < 1
) {
$(this
).val
(1
);
}
}
);
// 关闭模态框
$("
.close"
).click
(function() {
$("#categoryModal"
).hide
();
tinymce
.get
('content'
).setContent
(''
);
}
);
// 点击模态框外部关闭
$(window
).click
(function(event
) {
if
(event
.target ==
$("#categoryModal"
)[0]
) {
$("#categoryModal"
).hide
();
tinymce
.get
('content'
).setContent
(''
);
}
}
);
// 提交表单
$("#categoryForm"
).submit
(function(e
) {
e
.preventDefault
();
// 验证分类名称不能为空
var name =
$("#name"
).val
().trim
();
if
(name === ''
) {
$.MsgBox
.Alert
("提示", "分类名称不能为空"
);
$("#name"
).focus
(); // 聚焦到输入框
return;
}
// 验证分类内容（如果是必填的）
if
($("#content"
).is
(':required'
) && tinymce
.get
('content'
).getContent
().trim
() === ''
) {
$.MsgBox
.Alert
("提示", "分类内容不能为空"
);
tinymce
.get
('content'
).focus
(); // 聚焦到编辑器
return;
}
// 同步编辑器内容到 textarea
var content = tinymce
.get
('content'
).getContent
();
$('#content'
).val
(content
);
saveCategory
();
}
);
}
);
// 加载分类
数据
function loadCategoryData
() {
$.ajax
({
url: "
../problemClassification/
list",
type: "GET",
dataType: "
json",
success:
function(data
) {
renderCategoryTable
(data
);
},
error:
function() {
$.MsgBox
.Alert
("提示", "加载分类
数据失败"
);
}
}
);
}
// 渲染分类表格
function renderCategoryTable
(data
) {
var html = "";
$.each(data,
function(index, item
) {
html += '<tr data-id="' + item
.id + '">';
html += ' <td class="hidden-id">' + item
.id + '</td>'; // 隐藏的ID列
html += ' <td>' + item
.name + '</td>';
html += ' <td>' +
(item
.content || ''
) + '</td>'; // 新增内容列
html += ' <td>' +
(item
.orderNum || 0
) + '</td>';
html += ' <td class="action-buttons">';
html += ' <button class="btn btn-primary btn-sm edit-btn" data-id="' + item
.id + '">编辑</button>';
html += ' <button class="btn btn-success btn-sm add-child-btn" data-id="' + item
.id + '">
添加子类</button>';
html += ' <button class="btn btn-danger btn-sm delete-btn" data-id="' + item
.id + '">删除</button>';
html += ' </td>';
html += '</tr>';
//
添加子分类
if
(item
.chilsNode && item
.chilsNode
.length > 0
) {
$.each(item
.chilsNode,
function(i, child
) {
html += '<tr class="child-node" data-id="' + child
.id + '">';
html += ' <td class="hidden-id">' + child
.id + '</td>'; // 隐藏的ID列
html += ' <td>└ ' + child
.name + '</td>';
html += ' <td>' +
(child
.content || ''
) + '</td>'; // 新增内容列
html += ' <td>' +
(child
.orderNum || 0
) + '</td>';
html += ' <td class="action-buttons">';
html += ' <button class="btn btn-primary btn-sm edit-btn" data-id="' + child
.id + '">编辑</button>';
html += ' <button class="btn btn-danger btn-sm delete-btn" data-id="' + child
.id + '">删除</button>';
html += ' </td>';
html += '</tr>';
}
);
}
}
);
$("#category
List"
).html
(html
);
// 绑定按钮事件
$("
.edit-btn"
).click
(function() {
var id =
$(this
).data
("id"
);
editCategory
(id
);
}
);
//
添加子分类按钮点击事件
$("
.add-child-btn"
).click
(function() {
var pid =
$(this
).data
("id"
);
$("#modalTitle"
).text
("
添加子分类"
);
$("#categoryForm"
)[0]
.reset
();
$("#id"
).val
(""
);
$("#pid"
).val
(pid
);
$("#content"
).attr
("required", true
);
$("#contentGroup"
).removeClass
("hidden"
);
tinymce
.get
('content'
).show
(); // 显示编辑器
$("#categoryModal"
).show
();
setContentRequired
(true
);
}
);
$("
.delete-btn"
).click
(function() {
var id =
$(this
).data
("id"
);
$.MsgBox
.Confirm
("提示", "确定要删除这个分类吗？",
function() {
deleteCategory
(id
);
}
);
}
);
}
// 编辑分类
function editCategory
(id
) {
$("#modalTitle"
).html
("编辑分类 <small>
(加载中
...)</small>"
);
// 先确保编辑器实例存在
if
(!tinymce
.get
('content'
)) {
console
.error
('TinyMCE 编辑器未初始化'
);
$.MsgBox
.Alert
("温馨提示", "编辑器初始化失败，请刷新页面重试"
);
return;
}
$.ajax
({
url: "
../problemClassification/get/" + id,
type: "GET",
dataType: "
json",
success:
function(data
) {
$("#modalTitle"
).text
("编辑分类"
);
$("#id"
).val
(data
.id
);
$("#name"
).val
(data
.name
);
$("#orderNum"
).val
(data
.orderNum
);
$("#pid"
).val
(data
.pid
);
// 确保编辑器可见性正确
if
(data
.pid == 0
) {
setContentRequired
(false
);
} else {
setContentRequired
(true
);
}
// 延迟设置内容以确保编辑器就绪
setTimeout
(function() {
try {
tinymce
.get
('content'
).setContent
(data
.content || ''
);
$("#categoryModal"
).show
();
} catch
(e
) {
console
.error
('设置编辑器内容失败:', e
);
$.MsgBox
.Alert
("温馨提示", "编辑器内容设置失败，请重试"
);
}
}, 100
);
},
error:
function() {
$.MsgBox
.Alert
("温馨提示", "获
取分类信息失败"
);
}
}
);
}
// 保存分类
function saveCategory
() {
// 获
取提交按钮，并禁用 + 修改文字
var
$submitBtn =
$("#categoryForm"
).find
("button[type='submit']"
);
$submitBtn
.prop
("disabled", true
).text
("保存中
..."
);
// 强制同步 TinyMCE 内容到 textarea
tinymce
.get
('content'
).save
();
// 自定义验证
if
($("#content"
).is
(':required'
) && tinymce
.get
('content'
).getContent
().trim
() === ''
) {
$.MsgBox
.Alert
("温馨提示", '分类内容不能为空'
);
$submitBtn
.prop
("disabled", false
).text
("保存"
); // 恢复按钮状态
return false;
}
// 新增 orderNum 校验
const orderNum = parseInt
($("#orderNum"
).val
());
if
(isNaN
(orderNum
) || orderNum < 1
) {
$.MsgBox
.Alert
("温馨提示", "排序顺序必须为正整数"
);
$submitBtn
.prop
("disabled", false
).text
("保存"
); // 恢复按钮状态
return false;
}
var formData =
$("#categoryForm"
).serialize
();
var url =
$("#id"
).val
() ? "
../problemClassification/update" : "
../problemClassification/add";
$.ajax
({
url: url,
type: "POST",
data: formData,
success:
function(response
) {
if
(response === "
添加成功" || response === "更新成功"
) {
$("#categoryModal"
).hide
();
loadCategoryData
();
} else {
$.MsgBox
.Alert
("温馨提示", response
);
}
},
error:
function() {
$.MsgBox
.Alert
("温馨提示", "操作失败"
);
},
complete:
function() {
// 无论成功或失败，最终恢复按钮状态
$submitBtn
.prop
("disabled", false
).text
("保存"
);
}
}
);
}
// 删除分类
function deleteCategory
(id
) {
$.ajax
({
url: "
../problemClassification/delete/" + id,
type: "POST",
success:
function(response
) {
if
(response === "删除成功"
) {
loadCategoryData
();
} else {
$.MsgBox
.Alert
("温馨提示", response
);
}
},
error:
function() {
$.MsgBox
.Alert
("温馨提示", "删除失败"
);
}
}
);
}
</script>
</body>
</html>
分下一下，上传图片报错：Cannot read properties of undefined
(reading 'images_upload_url'
)
本文解答了使用$.each遍历数组与JSON时遇到的'i'和'a'未定义的问题，提供了常见错误排查技巧及解决方法。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
