我看到您正在使用 Java，所以您可能正在使用类似 servlet 的请求处理器。所以你至少有两种方法来表达你的观点，第三种只是我发现有用的建议：
- 将列表添加为 JSP 请求的属性并使用 JSTL
- 使用异步 javascript 请求（即 fetch 或 XHR）获取您的列表
- 使用第三方库（如 Boostrap-tables）
将列表添加为 JSP 请求的属性并使用 JSTL
Servlet
将您的列表添加到请求属性中。
public void doGet( // or doPost
HttpServletRequest req,
HttpServletResponse res
) throws ServletException, IOException {
List<Object> myList = new ArrayList<>();
req.setAttribute("myList", myList);
}
JSP
使用 JSTL 遍历您的列表，并为表格的每一行的每个单元格调用您想要的任何对象属性。
<form class="smart-form">
<table class="tb-regist" id="eeMsg">
<thead>
<tr>
<th>Sortation</th>
<th>situation</th>
<th>check</th>
<th colspan="2">message</th>
</tr>
</thead>
<tbody>
<c:forEach items="${ myList }" var="object">
<tr>
<td>${ object.seq_no }</td>
<td>${ object.type_big_category }</td>
<td>
<label class="checkbox" for="checkbox01">
<input type="checkbox"
name="checkbox"
id="checkbox01"
checked="checked" />
<i/>
</label>
</td>
<td>
<textarea class="form-control push-text">body</textarea>
</td>
<td>
<button type="button"
class="btn btn-primary">
save
</button>
<button type="button"
class="btn btn-default"
id='deletebutton'>
delete
</button>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</form>
不要忘记 JSTL 声明！
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
使用异步 javascript 请求（即 fetch 或 XHR）获取您的列表
Servlet
将您的列表添加到请求属性，但作为 JSON 格式，您可以使用来自 org.json 库的 org.json.JSONArray。
public void doPost( // or doGet
HttpServletRequest req,
HttpServletResponse res
) throws ServletException, IOException {
List<Object> myList = new ArrayList<>();
JSONArray jsonArray = new JSONArray(myList);
res.setContentType("application/json");
res.getWriter().print(jsonArray);
res.getWriter().flush();
res.getWriter().close();
res.flushBuffer();
}
JSP
只是静态 HTML，表格将使用 javascript 构建。
<form class="smart-form">
<table class="tb-regist" id="eeMsg">
<thead>
<tr>
<th>Sortation</th>
<th>situation</th>
<th>check</th>
<th colspan="2">message</th>
</tr>
</thead>
</table>
</form>
Javascript
将您的响应解析为 JSON 并迭代以使用 HTMLTableElement 构建您的表。
// XHR post function
var sendXHRPost = void 0;
{
sendXHRPost = function (url, params, callback) {
var http = new XMLHttpRequest();
http.open('POST', url, true);
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
http.onreadystatechange = function() {
if (http.readyState === 4) {
callback(http.status, http.responseText);
}
}
http.send(params);
}
}
// get your table data
var fetchTableData = void 0;
{
fetchTableData = function () {
sendXHRPost(
'myURL',
// maybe you don't pass parameters to fetch your table?
'parameterName=parameterValue',
function (responseStatus, responseText) {
makeTable(responseStatus, JSON.parse(responseText);
}
);
}
}
// formatter for your textarea cell
var textAreaCellFormatter = void 0;
{
textAreaCellFormatter = function (rowId) {
return '<textarea class="form-control push-text">'
+ rowId
+ '</textarea>';
}
}
// formatter for your buttons cell
var buttonsCellFormatter = void 0;
{
buttonsCellFormatter = function (rowId) {
return '<button type="button" '
+ 'class="btn btn-primary">'
+ 'save'
+ '</button>'
+ '<button type="button" '
+ 'class="btn btn-default" '
+ 'id="deletebutton'+rowId+'">'
+ 'delete'
+ '</button>';
}
}
// build your table
var makeTable = void 0;
{
makeTable = function (status, jsonResponse) {
var table = document.getElementById("eeMsg");
// Delete table content in case it was already loaded
for (var i = 1 ; i < table.rows.length ; i++) {
table.deleteRow(i);
}
for (var i = 0 ; i < table.tBodies.length ; i++) {
table.removeChild(table.tBodies[i]);
}
// Create tbody
var tBody = table.createTBody();
// Handle internal server error
if (status != 200) {
var row = tBody.insertRow();
var cell = row.insertCell(0);
cell.colSpan = "4";
cell.innerHTML = "Error while fetching data.";
}
// Handle no data found
else if (jsonResponse.length === 0) {
var row = tBody.insertRow();
var cell = row.insertCell(0);
cell.colSpan = "4";
cell.innerHTML = "No data found.";
}
// All fine, build your table
else {
for(var i = 0 ; i < jsonResponse.length ; i++) {
var row = tBody.insertRow();
row.insertCell(0).innerHTML = jsonResponse[i].seq_no;
row.insertCell(1).innerHTML = jsonResponse[i].type_big_category;
row.insertCell(2).innerHTML = textAreaCellFormatter(i);
row.insertCell(3).innerHTML = buttonsCellFormatter(i);
}
}
}
}
// Execute your function on page loading.
(function () { fetchTableData(); })();
Servlet
上面也一样。
JSP
<!-- libs and css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.2/dist/bootstrap-table.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.2/dist/bootstrap-table.min.js"></script>
<!-- your table in your body, not builded yet -->
<table id="eeMsg"
data-toolbar="#toolbar"
data-toggle="table"
data-pagination="true"
data-search="true"
data-url="yourFetchURLWithJSONResponse">
<thead>
<tr>
<th data-field="seq_no">Sortation</th>
<th data-field="type_big_category">situation</th>
<th>check</th>
<th colspan="2">message</th>
</tr>
</thead>
</table>