mirror of
https://gitee.com/bookshelfplus/bookshelfplus
synced 2025-09-02 23:23:28 +08:00
127 lines
5.2 KiB
HTML
127 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||
<head>
|
||
<%- include("./component/header.html"); %>
|
||
<style>
|
||
.main {
|
||
width: 70vw !important;
|
||
max-width: initial !important;
|
||
}
|
||
|
||
#result-table {
|
||
width: 100%;
|
||
/* border: 1px solid black; */
|
||
margin-top: 30px;
|
||
line-height: 2.3em;
|
||
}
|
||
|
||
tr:hover {
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
tr > th:last-child,
|
||
tr > td:last-child {
|
||
border-left: 2px dashed;
|
||
}
|
||
tr > th {
|
||
border-bottom: 2px dotted;
|
||
}
|
||
|
||
tr a {
|
||
cursor: pointer;
|
||
/* cursor: alias; */
|
||
}
|
||
|
||
@media (max-width: 700px) {
|
||
tr > th:last-child,
|
||
tr > td:last-child {
|
||
display: none;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<%- include("./component/navbar.html"); %>
|
||
<main class="main">
|
||
<h1><%= headText %></h1>
|
||
<div id="container">
|
||
<table id="result-table"></table>
|
||
</div>
|
||
</main>
|
||
<%- include("./component/footer.html"); %>
|
||
|
||
<!-- 渲染表格 -->
|
||
<script src="/assets/javascripts/renderTable.js"></script>
|
||
<!-- 生成分类层级关系 -->
|
||
<script src="/assets/javascripts/generateCategoryHierarchy.js"></script>
|
||
<script>
|
||
getRequest("/category/list")
|
||
.then(function (responseData) {
|
||
var axiosData = responseData.data;
|
||
var status = axiosData.status;
|
||
var data = axiosData.data;
|
||
if (status === "success") {
|
||
// console.log("获取的分类信息");
|
||
console.log(data)
|
||
|
||
var renderData = [];
|
||
|
||
// 按照列表渲染
|
||
// data.forEach(element => {
|
||
// var mainDivWidth = 70/*vw*/; // 定义div的宽度（用于计算表格中的数据的显示长度）
|
||
// var columnWidth = [60, 40];
|
||
// renderData.push({
|
||
// 分类名: ` <a target="_blank" href="/category?id=${element.id}">
|
||
// <span class="overflow-omit" style="max-width: ${columnWidth[0] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
|
||
// ${element.name}
|
||
// </span>
|
||
// </a>`,
|
||
// 简介: ` <span class="overflow-omit" style="max-width: ${columnWidth[1] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
|
||
// ${element.description}
|
||
// </span>`,
|
||
// })
|
||
// });
|
||
|
||
// 按照层级关系进行渲染
|
||
// console.log("按照层级关系排列好之后");
|
||
hierarchyData = generateCategoryHierarchy(data);
|
||
function render(category) {
|
||
function renderCategory(category, renderData) {
|
||
var mainDivWidth = 70/*vw*/; // 定义div的宽度（用于计算表格中的数据的显示长度）
|
||
var columnWidth = [70, 30];
|
||
renderData.push({
|
||
分类名: ` <a target="_blank" href="/category?id=${category.id}">
|
||
<span class="overflow-omit" style="max-width: ${columnWidth[0] * mainDivWidth / 100}vw; max-height: 2em; text-align: left;">
|
||
${" ".repeat((category.level-1)*8)}${category.name}
|
||
</span>
|
||
</a>`,
|
||
简介: ` <span class="overflow-omit" style="max-width: ${columnWidth[1] * mainDivWidth / 100}vw; max-height: 2em; text-align: left; text-indent: 1em;">
|
||
${category.description}
|
||
</span>`,
|
||
})
|
||
}
|
||
renderCategory(category, renderData);
|
||
// console.log("category", category)
|
||
for (let i = 0; i < category.children.length; i++)
|
||
render(category.children[i]);
|
||
}
|
||
render({ children: hierarchyData });
|
||
renderData.shift(); // 删除数组中的第一个元素
|
||
|
||
if(renderData.length == 0) {
|
||
renderTable({ data: `系统中暂时还没有书籍分类`, tableId: "result-table", renderTableHead: true });
|
||
} else {
|
||
renderTable({ data: renderData, tableId: "result-table", renderTableHead: true });
|
||
}
|
||
|
||
// 渲染后重新获取一次字体
|
||
fontmin(getPageText());
|
||
} else {
|
||
alert(`出错啦！${data.errMsg} (错误码: ${data.errCode}) `);
|
||
}
|
||
}).catch(function (error) {
|
||
console.log(error);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |