帆软-填报界面实现分页

问题描述：

　　在填报预览的模式下，顶部工具栏没有提供分页预览的功能。

　　如果没有分页预览功能的话，当数据集中的数据量大的时候会造成Java的堆栈内存溢出。

实现思路：

1. 针对报表做二次开发。由帆软的官网文档可知，帆软的前端页面是支持JQuery框架的，所以我们使用JQuery来制作分页器。
2. 禁用工具栏。填报预览模式下，帆软自带的工具栏中没有翻页的控件。如果使用帆软自带的工具栏，在制作分页器插件的时候比较麻烦。所以我么需要禁用帆软自带工具栏。
3. 数据集。如果想要实现列表分页的功能，最少需要两个数据集：数据列表数据集、数据总量数据集。
4. 数据对应。将“数据列表数据集”与“数据总量数据集”中的字段拖拽到帆软设计界面中，对应好位置。
5. 二次开发。在“模板WEB属性->填报页面设置”中，添加“加载结束事件”，开始编写JS代码。
6. 使用JS代码修改页面URL参数：currentPage。currentPage参数应用到数据集参数中。以SQL数据集为切入点实现分页功能。

具体实现：

　　1. 禁用帆软自带的工具栏。

　　

　　2. 定义数据集

　　

　　　　2.1 数据列表数据集SQL：

--currentPage 参数来自与URL

select * from page_test limit ${IF(TOINTEGER(currentPage)<=1,0,(TOINTEGER(currentPage)-1)*30)},30

 

　　　　2.2 数据总量数据集SQL：

select count(*) from page_test

 

　　3. 数据对应

　　　　将定义好的数据集与设计器中的行列对应好。为了后面能够获取总数据量来计算分页数，将总数剧列数据添加到F1单元格中，并将F列隐藏。

　　

 　　4. 二次开发　

　　

　　　　4.1 在“加载结束”事件中编写JS代码

　　　　

　　5. JS代码

　　

let cloAndRowIndex = FR.cellStr2ColumnRow("F1"); //使用帆软提供的JS API，获取F1单元格所在的行和列。
let totalCell = _g().getCell(cloAndRowIndex.row + 1, cloAndRowIndex.col + 1); //根据行列获取单元格对象。
//在内容区域上方添加 div，用来占位
$("#content-container").prepend("<div style='height:25px' />")
//在body标签中添加自定义工具栏
$("body").prepend("<div style='background-color:#f7f8fa;width:100%;height:25px;z-index: 9999;position: fixed;display:flex;align-items: center;' id='customeTool' />")
//定义分页按钮
let fristPage = "<button id='fristPage' style='margin-right:10px'>首页</button>"
let prePage = "<button id='prePage' style='margin-right:10px'>上一页</button>"
let currentPageNum = "<span id='currentPageNum' style='margin-right:5px'>0</span>";
let pageNumLine = "<span id='pageNumLine' style='margin-right:5px'>/</span>";
// let pageInput = "<input type=number min='1' placeholder='输入页码快速跳转' style='width:100px;height:20px;' />"
let totalPageNum = "<span id='totalPageNum' style='margin-right:10px'>0</span>";
let nextPage = "<button id='nextPage' style='margin-right:10px'>下一页</button>"
let lastPage = "<button id='lastPage' style='margin-right:10px'>末页</button>"
//将分页按钮添加到工具栏中
$("#customeTool").append(fristPage);
$("#customeTool").append(prePage);
$("#customeTool").append(currentPageNum);
$("#customeTool").append(pageNumLine);
// $("#customeTool").append(pageInput);
$("#customeTool").append(totalPageNum);
$("#customeTool").append(nextPage);
$("#customeTool").append(lastPage);
//采用闭包的方式，解析URL中的参数
let urlParams = parseUrlParams(window.location.href);
// 获取currentPage参数
let currentPage = urlParams.currentPage;

//给总页数赋值
let totalCellValueStr = totalCell.getValue(); //{"type":"text","value":"200000"}
if (totalCellValueStr) {
    let totalCellValueObject = JSON.parse(totalCellValueStr);
    if (totalCellValueObject.value) {
        $("#totalPageNum").text(Math.ceil((totalCellValueObject.value * 1) / 30));
        //获取URL中的参数
        $("#currentPageNum").text(currentPage);
        if (currentPage === "1") {
            $("#fristPage").attr("disabled", true);
            $("#prePage").attr("disabled", true);
        }
        if (currentPage >= Math.ceil((totalCellValueObject.value * 1) / 30)) {
            $("#nextPage").attr("disabled", true);
            $("#lastPage").attr("disabled", true);
        }
        //为分页按钮设置点击事件
        $("#nextPage").click(function (e) {
            let newUrl = new URL(window.location.href);
            newUrl.searchParams.set('currentPage', currentPage * 1 + 1);
            window.location.replace(newUrl.href)
        });
        $("#lastPage").click(function (e) {
            let newUrl = new URL(window.location.href);
            newUrl.searchParams.set('currentPage', Math.ceil((totalCellValueObject.value * 1) / 30));
            window.location.replace(newUrl.href)
        });
        $("#fristPage").click(function (e) {
            let newUrl = new URL(window.location.href);
            newUrl.searchParams.set('currentPage', 1);
            window.location.replace(newUrl.href)
        });
        $("#prePage").click(function (e) {
            let newUrl = new URL(window.location.href);
            newUrl.searchParams.set('currentPage', currentPage * 1 - 1);
            window.location.replace(newUrl.href)
        });
    }
} else {
    //没有获取到总页数
    $("#fristPage").attr("disabled", true);
    $("#prePage").attr("disabled", true);
    $("#nextPage").attr("disabled", true);
    $("#lastPage").attr("disabled", true);
}
function parseUrlParams(url) {
    let params = {}, search, temp;
    //使用split字符"?"截取url  
    search = url.split("?")[1];
    if (search) {
        //使用split字符"&"分割search获取每个参数名和值  
        temp = search.split("&");
        //遍历所有参数名和值  
        for (let i = 0; i < temp.length; i++) {
            //使用split字符"="分割参数名和值
            let param = temp[i].split("=");
            //将参数名和值添加到params对象中
            params[param[0]] = param[1];
        }
    }
    return params;
}