在使用 EasyUI 展示列表數據時，通常需要將后端返回的數據解析為 EasyUI 數據網格（datagrid）所需的格式。假設你的后端返回的是一個 ??ResponseEntity<Page<MonthlyCoefficient>>??? 結構，其中 ??Page??? 是 Spring Data 的分頁對象，??MonthlyCoefficient?? 是你定義的實體類。
以下是一個示例，展示如何在前端解析并展示這個數據結構：
后端部分（Spring Boot）
假設你有一個控制器方法返回 ??ResponseEntity<Page<MonthlyCoefficient>>??：
@RestController
@RequestMapping("/coefficients")
public class MonthlyCoefficientController {@Autowiredprivate MonthlyCoefficientService monthlyCoefficientService;@GetMappingpublic ResponseEntity<Page<MonthlyCoefficient>> getCoefficients(Pageable pageable) {return ResponseEntity.ok(monthlyCoefficientService.getCoefficients(pageable));}
}前端部分（EasyUI）
在前端，你需要解析 ??ResponseEntity<Page<MonthlyCoefficient>>?? 并將其轉換為 EasyUI 數據網格所需的格式。以下是一個示例：
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title> 管理</title><link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css"><script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script><script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body><h2> 系數表管理</h2><p>通過此界面可以對 系數表進行增刪改查操作。</p><table id="dg" title=" 系數表" class="easyui-datagrid" style="width:100%;height:500px"url="http://localhost:8080/coefficients"toolbar="#toolbar" pagination="true"rownumbers="true" fitColumns="true" singleSelect="true"><thead><tr><th field="id" width="50">ID</th><th field="dataMonth" width="100">月份</th><th field="clearingCoefficient" width="150"> 系數</th> <th field="createBy" width="100">創建者</th><th field="createTime" width="150">創建時間</th><th field="updateBy" width="100">更新者</th><th field="updateTime" width="150">更新時間</th></tr></thead></table><div id="toolbar"><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newCoefficient()">新增</a><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editCoefficient()">編輯</a><a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyCoefficient()">刪除</a></div><script type="text/javascript">$(function() {$('#dg').datagrid({onBeforeLoad: function(param) {param.page = param.page || 1; // 當前頁碼param.rows = param.rows || 10; // 每頁記錄數},loadFilter: function(data) {if (data && data.body) {var pageData = data.body;return {total: pageData.totalElements,rows: pageData.content};} else {return {total: 0,rows: []};}}});});function newCoefficient(){// 新增操作}function editCoefficient(){// 編輯操作}function destroyCoefficient(){// 刪除操作}</script>
</body>
</html>關鍵點解釋
- onBeforeLoad: 在數據加載之前，設置請求參數 ?
?page?? 和 ??rows??，分別表示當前頁碼和每頁記錄數。 - loadFilter: 解析后端返回的數據，提取 ?
?totalElements?? 和 ??content??，分別表示總記錄數和當前頁的數據。
通過這種方式，你可以將 Spring Boot 返回的分頁數據正確地展示在 EasyUI 數據網格中。
