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

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

1. config.commandMap = {
   
2.                                 insertDataManager: insertDataManagerCommand,
   
3.                                 reportSheetDataEntryPreview:reportSheetPreviewCommand,
   
4.                                 PrePage:{
   
5.                                         title: "上一页",
   
6.                                         text: "上一页",
   
7.                                         iconClass: "pagination-bar-previous-page",
   
8.                                         bigButton: "=ribbonHeight>toolbarHeight",
   
9.                                         commandName: "PerPage",
   
10.                                         execute: function (context, propertyName, arg) {
    
11.                                                 let pageInfo = {pageNum: 1}
    
12.                                                 let spread = context.getWorkbook();
    
13.                                                 refreshTable(spread,pageInfo);
    
14.                                         }
    
15.                                 },
    
16.                                 NextPage:{
    
17.                                         title: "下一页",
    
18.                                         text: "下一页",
    
19.                                         iconClass: "pagination-bar-next-page",
    
20.                                         bigButton: "=ribbonHeight>toolbarHeight",
    
21.                                         commandName: "NextPage",
    
22.                                         execute: function (context, propertyName, arg) {
    
23.                                                 let pageInfo = {pageNum: 2}
    
24.                                                 let spread = context.getWorkbook();
    
25.                                                 refreshTable(spread,pageInfo);
    
26.                                         }
    
27.                                 }
    
28.                         }
    
29.                         config.ribbon[25].buttonGroups.push({
    
30.                                 "label": "分页控制",
    
31.                                 "commandGroup": {
    
32.                                         "commands": [
    
33.                                                 "PrePage",
    
34.                                                 "NextPage"
    
35.                                         ]
    
36.                                 },
    
37.                                 visibleWhen:"reportSheetIsDataEntryPreviewMode"
    
38.                         });

复制代码

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

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

复制代码

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

1. var dataManager = spread.dataManager();
   
2.                                 var dataSourceOption = {
   
3.                                         remote: {
   
4.                                                 read: {
   
5.                                                         "url": url,
   
6.                                                         "body": options,
   
7.                                                         "method": method
   
8.                                                 }
   
9.                                         },
   
10.                                         schema: {
    
11.                                                 columns: {
    
12.                                                         "编号": {dataName: "id"},
    
13.                                                         "姓名": {dataName: "name"},
    
14.                                                         "年龄": {dataName: "age"},
    
15.                                                         "性别": {dataName: "sex"},
    
16.                                                         "部门编号": {dataName: "depId"}
    
17.                                                 }
    
18.                                         }
    
19.                                 };
    
20.                                 
    
21.                                 var myTable = dataManager.addTable(tableName, dataSourceOption);

复制代码

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

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

复制代码

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

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