JS实现动态设置每页显示固定行数

编辑
  • 文档创建者:gxy120313
  • 浏览次数:6958次
  • 编辑次数:7次
  • 最近更新:Carly 于 2019-07-18
  • 1. 问题描述

    在实际项目中,有可能会用到每页显示固定的行数和鼠标滑动变色,如果使用 JavaScript 来实现每页显示固定的行数,那么这时候就需要在工具栏自定义按钮来实现翻页了,具体该如何实现呢?



    2. 解决方案

    2.1 模板数据集配置

    在新模板中新建 3 个数据集。

    ds1:SELECT * FROM 订单 where 货主地区 is not null and 应付金额 is not null  ${if(len(area)>0," and 货主地区='"+area+"'","")} order by 货主地区,订单ID limit ${if(fr_pagenumber>=1,(fr_pagenumber-1)*pageSize+','+pageSize,pageSize)}

    ds1用于展示正文报表数据。pageSize 设置一个默认值,如 10。

    ds2:select 货主地区 from 订单 where 货主地区 is not null group by 货主地区
    ds2 是参数面板货主地区的数据字典来源。

    ds3:${if(totalCount>0 && totalPage>0,'select '+totalCount+' as totalCount ','SELECT count(*) totalCount FROM 订单 where 货主地区 is not null and 应付金额 is not null '+ if(len(area)>0," and 货主地区='"+area+"'",""))} 

    ds3 用于获取每次查询结果的记录条数,即每次查询结果共有多少条记录,并可以计算共有多少页报表。


    2.2 模板参数配置


    添加 4 个参数:area:货主地区;totalPage:总页数;pageSize:每页显示数量;totalCount:总记录条数,如下图所示:

    2.3 参数面板配置

    添加三个文本控件,分别命名为 fr_pagenumer   、totalPage  、totalCount,totalCount 值绑定数据列 ds3的 totalCount,参数界面如下图:
    当前页:fr_pagenumer是报表自带的参数,不必再在模板参数里添加 ,该参数代表报表当前页是第几页。
    总页数:totalPage是自定义的参数,代表报表总共有多少页。
    总条数totalCount是自定义的参数,代表报表总共有多少条记录。

    在地区后添加一个下拉框单选控件,控件命名为area,数据字典配置为:

    再每页显示行数添加一个下拉框单选控件,控件命名为 pageSize,数据字典配置为:

    添加一个预定义查询按钮,添加按钮点击事件,如下图所示:


    JavaScript 代码如下:
    var widget=contentPane.parameterEl.getWidgetByName('fr_pagenumber');
    widget.setValue('1');//每次点击查询时将当前页重置为1
    _g().parameterCommit();


    2.4 报表主体

    模板设计如下图所示:
    A 列需要隐藏。A3 单元格插入公式:ds1.select(#0),表示 ds1 数据集里的所有行号,行号从 1 开始。
    A4 插入公式:CONCATENATE("第",$fr_pagenumber,"页,共",roundup(value("ds3","totalCount")/$pageSize),"页,",$pageSize,"条/页,共",$totalCount,"条")
    公式含义为
    concatenate 函数是将一系列的字符串值串联成新的字符串;
    roundup 函数是将含有小数的值进行向上取整;
    value("ds3","totalCount")是获取 ds3 数据集里的 totalCount 列的值,因为 ds3 里只有一行一列,所以这样写就可以了,具体可查看 value 函数用法


    2.5 报表分页预览配置

    点击菜单模板>模板 Web 属性>分页预览设置,设置为该模板单独设置,自定义翻页按钮只能在该模板使用,如下图所示:

    (1)工具栏配置:先清空原有的工具栏,然后添加四个自定义按钮
    首页按钮:编辑按钮图标,控件别名为首页,控件图表选择  ,如下图所示:

    点击自定义事件,添加js代码:

    page_up_down('firstPage',this);

    上一页按钮:编辑按钮图标,控件别名为上一页,控件图表选择  ,自定义事件中添加 JavaScript 代码:

    page_up_down('prevPage',this);

    下一页按钮:编辑按钮图标,控件别名为下一页,控件图表选择  ,自定义事件中添加 JavaScript 代码:

    page_up_down('nextPage',this);

    末页按钮:编辑按钮图标,控件别名为末页,控件图表选择  ,自定义事件中添加 JavaScript 代码:

    page_up_down('lastPage',this);

    (2)JS引用设置

    %FR_HOME%\webapps\webroot目录下新建文件夹js,将 page.js 复制到 JS 文件夹里,并点击菜单模板>报表 Web 属性>引用 JavaScript中进行引用 JavaScript 的配置,如下图所示:

    注:如果 JS 要在所有报表里引用,可在服务器>服务器配置>引用 JavaScript 里添加 page.js。

    JavaScript 文件解释:
    page.js 包含了两个函数:
    page_up_down 函数,功能是点击翻页按钮时触发 JS 事件,先获取当前页,再和总页数做对比,进行下一页、上一页的相应加减功能及跳转到末页功能。
    afterload 函数,功能是将数据集返回的报表总页数、总条数更新到参数面板的控件里,然后在查询时作为参数传递到 SQL 里获取报表数据。

    page.js 代码:


    //翻页按钮事件
    function page_up_down(mode,obj){
    var widget=contentPane.parameterEl.getWidgetByName("fr_pagenumber");
    var fr_pagenumber=widget.getValue();
    console.log('fr_pagenumber='+fr_pagenumber);
    if(mode=='firstPage'){//首页
    if(fr_pagenumber>1){
    widget.setValue(1);
    }else{
    obj.setEnable(false);
    return ;
    }
    }else if(mode=='lastPage'){//末页
    var widget2=contentPane.parameterEl.getWidgetByName('totalPage');
    var totalPage=widget2.getValue();
    //console.log('totalPage='+totalPage);
    if(parseInt(fr_pagenumber)<parseInt(totalPage)){
    widget.setValue(totalPage);
    }else{
    obj.setEnable(false);
    return ;
    }
    }else if(mode=='prevPage'){//上一页
    if(fr_pagenumber>1){
    fr_pagenumber=parseInt(fr_pagenumber)-parseInt(1);
    widget.setValue(fr_pagenumber);
    }else{
    obj.setEnable(false);
    return ;
    }
    }else if(mode=='nextPage'){//下一页
    var widget2=contentPane.parameterEl.getWidgetByName('totalPage');
    var totalPage=widget2.getValue();
    fr_pagenumber=parseInt(fr_pagenumber)+parseInt(1);
    if(parseInt(fr_pagenumber)<=parseInt(totalPage)){
    widget.setValue(fr_pagenumber);
    }else{
    obj.setEnable(false);
    return ;
    }
    }
    _g().parameterCommit();//报表参数提交
    }
    function afterload(){
    //更新总页数
    var widget=contentPane.parameterEl.getWidgetByName('totalPage');
    var widget2=contentPane.parameterEl.getWidgetByName('pageSize');
    var widget3=contentPane.parameterEl.getWidgetByName('totalCount');
    if(widget){
    var totalCount=widget3.getValue();
    var pageSize=widget2.getValue();
    var totalPage=Math.ceil(totalCount/pageSize);
    console.log('totalPage='+totalPage);
    var newPage=widget.getValue();
    if(newPage<1){
    newPage=1;
    }
    //if(newPage!=totalPage){
    widget.setValue(totalPage);
    //}
    var widget4=contentPane.parameterEl.getWidgetByName('fr_pagenumber');
    var pagenumber=widget4.getValue();
    if(pagenumber>totalPage && totalPage>0){
    widget4.setValue(totalPage);
    }
    }
    }

    (3)报表加载结束事件
    点击菜单模板>模板 Web 属性>分页预览设置,添加报表加载结束事件:

    JavaScript代码如下:

    afterload();

    若想设置鼠标滑动变色的效果,继续在分页预览设置里添加报表加载结束事件,并在事件里加入 JavaScript 代码:

    contentPane.makeHighlight('#E6E6FA ','mouseover');//鼠标滑动变色

    若想设置页面居中的效果,继续在分页预览设置里添加报表加载结束事件,并在事件里加入 JavaScript 代码:


     //框架
    var wrap = $('.reportPane');
    //主体内容
    var body = $('.page-block');
    //计算偏移
    var dif = (wrap.width() - body.width()) / 2;
    //设置属性
    body.css({'margin-left': dif});

    2.6 效果参考

    保存后,点击分页预览,即可看到如上效果。

    附件列表


    主题: 二次开发
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]