mirror of
https://gitee.com/bookshelfplus/bookshelfplus
synced 2025-09-02 23:23:28 +08:00
分类首页前端渲染完成
This commit is contained in:
@@ -0,0 +1,60 @@
|
||||
// 将分类按照层级关系进行处理
|
||||
function generateCategoryHierarchy(data) {
|
||||
var maxRenderLevel = 5; // 最多渲染几层
|
||||
var datas = []; // 用于保存每个层级的数组， [ [ level 1 ], [ level 2 ], ... ]
|
||||
for (let i = 0; i < maxRenderLevel; i++)
|
||||
datas.push([]);
|
||||
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
const cate = data[i];
|
||||
if (!cate) continue; // 分类对象为空
|
||||
if (cate.level > maxRenderLevel) continue; // 分类的层级大于最大渲染层级
|
||||
datas[cate.level - 1].push(cate);
|
||||
|
||||
// 顺便为每个分类添加 children 字段
|
||||
cate.children = [];
|
||||
}
|
||||
|
||||
// 从最低的层级开始渲染，因为最低层级无子分类，所以略过
|
||||
for (let i = maxRenderLevel - 1 - 1; i >= 0; i--) {
|
||||
var parentLevel = i;
|
||||
var childLevel = i + 1;
|
||||
for (let parentIndex = 0; parentIndex < datas[parentLevel].length; parentIndex++) {
|
||||
const parentCategory = datas[parentLevel][parentIndex];
|
||||
for (let childIndex = 0; childIndex < datas[childLevel].length; childIndex++) {
|
||||
const childCategory = datas[childLevel][childIndex];
|
||||
// console.log(parentCategory, childCategory);
|
||||
if (parentCategory.id === childCategory.parentId) {
|
||||
parentCategory.children.push(childCategory);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 对元素进行排序
|
||||
function sortChildren(categoryList) {
|
||||
function compare(property) {
|
||||
return function (a, b) {
|
||||
var value1 = a[property];
|
||||
var value2 = b[property];
|
||||
return value1 - value2;
|
||||
}
|
||||
}
|
||||
|
||||
function sortCategoryList(categoryList) {
|
||||
// console.log("categoryList", categoryList);
|
||||
categoryList.sort(compare("order"));
|
||||
for (let i = 0; i < categoryList.length; i++)
|
||||
sortCategoryList(categoryList[i].children);
|
||||
// console.log(Array.isArray(categoryList));
|
||||
}
|
||||
|
||||
sortCategoryList(categoryList);
|
||||
}
|
||||
sortChildren(datas[0]);
|
||||
|
||||
// console.log(datas);
|
||||
// console.log(datas[0]);
|
||||
|
||||
return datas[0];
|
||||
}
|
||||
@@ -2,41 +2,116 @@
|
||||
<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><%= title %></h1>
|
||||
<div id="container">
|
||||
<!-- <a href="./book">书本详情页</a> -->
|
||||
<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 (response) {
|
||||
var axiosData = response.data;
|
||||
.then(function (responseData) {
|
||||
var axiosData = responseData.data;
|
||||
var status = axiosData.status;
|
||||
var data = axiosData.data;
|
||||
if (status === "success") {
|
||||
// console.log("获取的分类信息");
|
||||
console.log(data)
|
||||
// if (data.description == "")
|
||||
// data.description = "暂无描述";
|
||||
|
||||
// var topCategory = data.parentId !== 0 ? `<a href="/category?id=${data.parentId}">上级分类</a>` : "";
|
||||
// document.getElementById("container").innerHTML = `
|
||||
// <div class="grid">
|
||||
// <div class="grid-item">
|
||||
// <h1>${data.name}</h1>
|
||||
// <p>分类ID: ${data.id}</p>
|
||||
// <p>${topCategory}</p>
|
||||
// </div>
|
||||
// <div class="grid-item">
|
||||
// <h2>简介</h2>
|
||||
// <p>${data.description}</p>
|
||||
// </div>
|
||||
// </div>`;
|
||||
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());
|
||||
|
||||
@@ -185,6 +185,8 @@
|
||||
<select id="selectAll" resultMap="BaseResultMap">
|
||||
select
|
||||
<include refid="Base_Column_List" />
|
||||
,
|
||||
<include refid="Blob_Column_List" />
|
||||
from category_info
|
||||
</select>
|
||||
</mapper>
|
||||
Reference in New Issue
Block a user