easyui 列表展示如何解析 ResponseEntity＜Page＜Monthlycoefficient＞＞这样的返回结构

时间:2025/7/8 9:55:48来源：https://blog.csdn.net/jiao_zg/article/details/140530020 浏览次数: 0次

在使用 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>