报表插件（ReportSheet）实现后端分页

收藏

本帖最后由 AlexZ 于 2024-10-9 13:50 编辑

之前在讲解设置数据源的一篇文章中提到过后端分页，在本篇文章中，我们会详细的来说一下后端分页的具体实现。
首先是一些前期的知识铺垫，可以参考设置数据源的文章：
https://gcdn.grapecity.com.cn/showtopic-227570-1-1.html
首先，利用上文将的思路，我们通过对数据源的链接进行改造，改成POST模式，并设置上参数，由于是后端分页，所以我们可以将页码当做参数传给后端。
这个跟之前文章类似，不再过多赘述。
接下来，我们需要改造后端分页的按钮，利用按钮去控制分页。参考下面这部分代码：

config.commandMap = {
insertDataManager: insertDataManagerCommand,
reportSheetDataEntryPreview:reportSheetPreviewCommand,
PrePage:{
title: "上一页",
text: "上一页",
iconClass: "pagination-bar-previous-page",
bigButton: "=ribbonHeight>toolbarHeight",
commandName: "PerPage",
execute: function (context, propertyName, arg) {
let pageInfo = {pageNum: 1}
let spread = context.getWorkbook();
refreshTable(spread,pageInfo);
}
},
NextPage:{
title: "下一页",
text: "下一页",
iconClass: "pagination-bar-next-page",
bigButton: "=ribbonHeight>toolbarHeight",
commandName: "NextPage",
execute: function (context, propertyName, arg) {
let pageInfo = {pageNum: 2}
let spread = context.getWorkbook();
refreshTable(spread,pageInfo);
}
}
}
config.ribbon[25].buttonGroups.push({
"label": "分页控制",
"commandGroup": {
"commands": [
"PrePage",
"NextPage"
]
},
visibleWhen:"reportSheetIsDataEntryPreviewMode"
});

复制代码

代码中我们爱ReportSheet设置的Tab中添加了一个label 分页控制，在分页控制的label中添加了两个按钮上一页，下一页。
另外修改了按钮的显示逻辑，由于是后端分页，所以我们设置了让其在预览模式的普通模式下才显现，而在分页模式下，默认提供了前端分页的功能，所以在此功能下我们设置的后端分页按钮将不显示，避免功能的混淆。
这里通过设置visibleWhen的属性来实现。
在按钮的点击逻辑中我们将分页的参数传入，调用了RefreshTable这个我们封装好了的方法，该方法详细实现参考下面代码：

function refreshTable(spread,options){
//这里hardcode了表名，可根据实际情况获取需要刷新数据的表
var dataTable = spread.dataManager().tables["学生信息表"];
if(dataTable){
dataTable.options.remote.read.body = options;
dataTable.fetch(true).then(function () {
if(spread.getActiveSheetTab()){
spread.getActiveSheetTab().refresh(); // 强制刷新页面
}
});
}else{
console.log("找不到对应的表");
}
}

复制代码

代码中我们hardcode了表名，实际中我们可以将表名当做参数一同传入。在拿到dataTable后，我们需要更改dataTable的options。这个options对应的就是前文我们创建dataTable时设置的dataSourceOption.

var dataManager = spread.dataManager();
var dataSourceOption = {
remote: {
read: {
"url": url,
"body": options,
"method": method
}
},
schema: {
columns: {
"编号": {dataName: "id"},
"姓名": {dataName: "name"},
"年龄": {dataName: "age"},
"性别": {dataName: "sex"},
"部门编号": {dataName: "depId"}
}
}
};
var myTable = dataManager.addTable(tableName, dataSourceOption);

复制代码

其实就是为了更改options中传入的参数pageNum。
接下来，我们需要改写点击预览按钮的功能，因为预览按钮的默认功能是加载dataManager中的数据，而我们dataManager的数据是根据后端分页传参不同区切换的，那么有引发了一个问题，假设目前dataManager中的数据不是第一页的数据，那么我们点击预览按钮的时候，加载的数据就不是第一页的数据了。而按照正常逻辑，点击预览加载数据的时候一般都是先加载第一页的数据，后根据分页按钮进行数据切换。所以故需要对这部分进行改写。

var reportSheetPreviewCommand = GC.Spread.Sheets.Designer.getCommand('reportSheetDataEntryPreview');
var oldexecute = reportSheetPreviewCommand.execute;
reportSheetPreviewCommand.execute = function(context, propertyName, arg){
let spread = context.getWorkbook();
let pageInfo = {pageNum: 1}
refreshTable(spread,pageInfo);
oldexecute.apply(this,[context, propertyName, arg]);
}

复制代码

上面的代码中获取了原有的这部分逻辑，然后改写了其中的execute方法也就是点击之后执行的逻辑。
点击预览按钮后将展示第一页内容：
image.png114323424.png

通过我们设置的“上一页”，”下一页“两个后端分页按钮，点击后从服务端请求上一页和下一页的数据并展示

		自动登录	找回密码
密码			立即注册

报表插件（ReportSheet）实现后端分页

0 个回复

讲师达人

悬赏达人

微信认证勋章

SpreadJS 认证

SpreadJS 高级认证

元老葡萄