easyui 列表展示 如何解析 ResponseEntity＜Page＜Monthlycoefficient＞＞ 这样的返回结构
在使用 EasyUI 展示列表数据时，通常需要将后端返回的数据解析为 EasyUI 数据网格（datagrid）所需的格式。假设你的后端返回的是一个 ResponseEntity<Page<MonthlyCoefficient>> 结构，其中 Page 是 Spring Data 的分页对象，MonthlyCoefficient 是你定义的实体类。
以下是一个示例，展示如何在前端解析并展示这个数据结构：
后端部分（Spring Boot）
假设你有一个控制器方法返回 ResponseEntity<Page<MonthlyCoefficient>>：
@RestController
@RequestMapping("/coefficients")
public class MonthlyCoefficientController {
@Autowired
private MonthlyCoefficientService monthlyCoefficientService;
@GetMapping
public 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 数据网格中。
原文地址：https://blog.csdn.net/jiao_zg/article/details/140530020
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！