mirror of
https://gitee.com/bookshelfplus/bookshelfplus
synced 2025-09-24 18:35:15 +08:00
108 lines
4.8 KiB
HTML
108 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||
<head>
|
||
<%- include("./component/header.html"); %>
|
||
<style>
|
||
.main {
|
||
width: 80vw !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 a {
|
||
cursor: pointer;
|
||
/* cursor: alias; */
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<%- include("./component/navbar.html"); %>
|
||
<div class="main">
|
||
<h1><%= title %></h1>
|
||
<%- include("./component/searchbox.html"); %>
|
||
<div id="container">
|
||
<table id="result-table"></table>
|
||
<!-- <table id="origin-table"></table> -->
|
||
</div>
|
||
</div>
|
||
<%- include("./component/footer.html"); %>
|
||
|
||
<!-- 获取参数 -->
|
||
<script src="./assets/javascripts/getParams.js"></script>
|
||
<!-- 渲染表格 -->
|
||
<script src="./assets/javascripts/renderTable.js"></script>
|
||
<script>
|
||
var requestParams = getParams();
|
||
var searchbox = document.getElementById("searchInput");
|
||
var keyword = (requestParams["keyword"] || "").trim();
|
||
searchbox.value = keyword;
|
||
if (keyword === "") {
|
||
searchbox.focus();
|
||
} else {
|
||
search(keyword);
|
||
}
|
||
|
||
function search(searchboxValue) {
|
||
getRequest("/book/search", { bookName: searchboxValue })
|
||
.then(function (responseData) {
|
||
var axiosData = responseData.data;
|
||
var status = axiosData.status;
|
||
var data = axiosData.data;
|
||
if (status === "success") {
|
||
// console.log(data)
|
||
|
||
// 数据进行转换
|
||
var renderData = [];
|
||
data.forEach(element => {
|
||
var mainDivWidth = 80/*vw*/; // 定义div的宽度（用于计算表格中的数据的显示长度）
|
||
var columnWidth = [23, 17, 30, 10, 20];
|
||
renderData.push({
|
||
书名: ` <a target="_blank" href="/book?id=${element.category.id}">
|
||
<span class="overflow-omit" style="max-width: ${columnWidth[0] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
|
||
${element.bookName}
|
||
</span>
|
||
</a>`,
|
||
分类: ` <a target="_blank" href="/category?id=${element.category.id}">
|
||
<span class="overflow-omit" style="max-width: ${columnWidth[1] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
|
||
${element.category.name}
|
||
</span>
|
||
</a>`,
|
||
简介: ` <span class="overflow-omit" style="max-width: ${columnWidth[2] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
|
||
${element.description}
|
||
</span>`,
|
||
语言: ` <span class="overflow-omit" style="max-width: ${columnWidth[3] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
|
||
${element.language}
|
||
</span>`,
|
||
出版社: `<span class="overflow-omit" style="max-width: ${columnWidth[4] * mainDivWidth / 100}vw; max-height: 2em; margin: 0 auto;">
|
||
${element.publishingHouse}
|
||
</span>`,
|
||
})
|
||
});
|
||
|
||
if(renderData.length == 0) {
|
||
renderTable({ data: `没有搜索到与 <span style="color: red;">${searchboxValue}</span> 相关的书籍，请换个关键词再试试吧`, tableId: "result-table", renderTableHead: true });
|
||
} else {
|
||
renderTable({ data: renderData, tableId: "result-table", renderTableHead: true });
|
||
}
|
||
// renderTable({ data: data, tableId: "origin-table", renderTableHead: true });
|
||
|
||
// 渲染后重新获取一次字体
|
||
fontmin(getPageText());
|
||
} else {
|
||
alert(`出错啦！${data.errMsg} (错误码: ${data.errCode}) `);
|
||
}
|
||
});
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |