决策报表报表块工具栏自定义按钮实现数据集翻页

背景：

      1、决策报表中报表块由于数据量过大导致内存溢出，然而报表块中并不能使用行式引擎。

      2、为了解决上述问题，自己所能想到的两种方案：

           a、使用网页框插件，把报表块内容用cpt完成，同时在cpt中使用行式引擎实现分页，通过网页框插件在frm中展示。

           b、自定义翻页按钮，将页码传到数据集实现数据集分页，减少查询的数据量。

正文：本文介绍以设置自定义按钮方式实现数据集分页查询。

       一、总体思路

           1、设置模板参数page,用于传递页码。

           2、自定义按钮设置js，实现翻页功能。

       二、详情

           1、设置模板参数page,page_size

                a. page：默认值为1。

                b. page_size：每页展示的数据条数。

          2、数据集分页，不同的数据库分页语句写法不同。我们使用的oracle数据库，分页sql如下：

               

           3、报表块工具栏添加自定义按钮，设置js实现翻页功能，同时跟随页码变化修改对应按钮的样式。

                a. 增加5个自定义按钮，分别命名为首页、上一页、显示页码和总页数的按钮、下一页、末页。

                

               b.按钮js设置

                  a). 首页按钮中js设置，点击首页按钮后，数据回到第一页，首页按钮和上一页按钮置灰不可用，下一页和末页按钮为可用。

                     说明：由于本人前端水平有限，就不去判断下一页和末页按钮状态，直接点击首页后设置下一页和末页按钮为可用。

                               此处也不用考虑只有一页数据的情况，在报表块初始化事件中会判断共有几页数据，如果只有一页则所有按钮都置灰不可用。

                               js通过查询所有类选择器为fr_btn获取所有按钮，然后通过下表分别获取具体的按钮进行设置。

                              注：如果数据按钮的位置变化，需修改对应位置，由于本人前端水平有限，有兄弟有更好的方式敬请回帖指正。

                    //获取report0报表块

                    var re = _g().getWidgetByName("report0");

                   //获取参数值后加载报表

                  re.gotoPage(1, "{page:" + page + "}", true);

 

                  //设置显示所在页码和总页数

                  var text = document.querySelectorAll(".fr-btn")[2];

                  text.style.pointerEvents = "none";

                  text.innerText=page + "/" + pagecount;

 

                 //首页和上一页按钮置灰并按钮不可用

                 var btn_first = document.querySelectorAll(".fr-btn")[0];

               //按钮置灰

                btn_first.style.opacity = '0.5';

              //按钮不可用

                btn_first.style.pointerEvents = "none";

                var btn = document.querySelectorAll(".fr-btn")[1];

               //设置置灰

                btn.style.opacity = '0.5';

              //设置按钮不可用

               btn.style.pointerEvents = "none";

 

             //下一页和末页按钮设置为可用不置灰

            var btn_next = document.querySelectorAll(".fr-btn")[3];

            btn_next.style.opacity = '1';

            btn_next.style.pointerEvents = "visible";

            var btn_last = document.querySelectorAll(".fr-btn")[4];

            btn_last.style.opacity = '1';

            btn_last.style.pointerEvents = "visible";

          b). 上一页按钮js设置

                逻辑：点击上一页按钮后，数据回到上一页，下一页和末页按钮为可用，如果上一页是第一页则首页按钮和上一页按钮置灰不可用。

            具体js参照首页按钮的js设置。

          c). 页码/总页数：此处不用设置js,只用于显示。

          d). 下一页按钮js设置

                逻辑：点击下一页按钮后，数据显示下一页，上一页和首页按钮为可用，如果下一页是最后一页则下一页和末页按钮置灰不可用。

               具体js参照首页按钮的js设置。

          e). 最后一页按钮js设置

                逻辑：点击末页按钮后，数据显示最后一页，上一页和首页按钮为可用，下一页和末页按钮置灰不可用。

           3、报表块添加初始化事件，用于设置自定义按钮的初始状态。

                逻辑：初始化时报表展示第一页数据，首页和上一页按钮置灰，如果数据只有一页则所有按钮都置灰不可用。页码显示为1/总页数。

            

注：js传递参数,通过上图中参数设置，通过公式获取变量page和pagecount。

pagecount计算方式：roundup(value("ds3",1,1)/$page_size,0)

ds3数据集，用于获取数据总条数。

       三、完成效果

上传失败:上传格式错误,只允许:doc,docx,xls,xlsx,ppt,pptx,htm,html,txt,zip,rar,gz,bz2,pdf - 自定义工具栏按钮.frm (74.05 K)自定义工具栏按钮.zip (15.38 K)

自定义工具栏按钮 - v2.zip (13.53 K)

附件说明：v2中增加了输入框和跳转按钮，可在输入框输入数字，跳转到对应页。

本文主要是为了自己记录开发这个报表的思路方便以后查阅，文档写的有些乱。如有兄弟刚好需要，可直接下载最后附件中的报表文件，报表使用FR10开发。

---------------------------------------------

为了尽量还原工具栏的功能，增加了输入框和跳转按钮。

1、增加输入框

     a. 在工具栏中增加一个自定义按钮。

     b. 报表块的初始化事件中通过js获取该按钮并修改为Input框。

js代码如下：

2. 跳转按钮设置

逻辑：

     1.获取输入框的值

     2.判断输入的值是否合法的值。

     3.根据输入的值判断设置对应按钮置灰不可用。

//获取输入框的值

var in_val = document.getElementById("newPage").value;

if(in_val>pagecount||isNaN(in_val) || in_val <= 0){

alert("请输入有效的数字！");

}else{

//获取report0报表块

var re = _g().getWidgetByName("report0");

//获取参数值后加载报表

re.gotoPage(1, "{page:" + in_val + "}", true);

 

//设置显示所在页码和总页数

var text = document.querySelectorAll(".fr-btn")[2];

//text.style.opacity = '0.5';

text.style.pointerEvents = "none";

text.innerText=in_val + "/" + pagecount;

 

if(in_val==1){

//首页和上一页按钮置灰并按钮不可用

var btn_first = document.querySelectorAll(".fr-btn")[0];

btn_first.style.opacity = '0.5';

btn_first.style.pointerEvents = "none";

 

var btn_up = document.querySelectorAll(".fr-btn")[1];

//设置置灰

btn_up.style.opacity = '0.5';

//设置按钮不可用

btn_up.style.pointerEvents = "none";

 

//下一页和末页按钮设置为可用不置灰

var btn_next = document.querySelectorAll(".fr-btn")[3];

btn_next.style.opacity = '1';

btn_next.style.pointerEvents = "visible";

var btn_last = document.querySelectorAll(".fr-btn")[4];

btn_last.style.opacity = '1';

btn_last.style.pointerEvents = "visible";

}else if(in_val==pagecount){

//末页和下一页按钮置灰并按钮不可用

var btn_next = document.querySelectorAll(".fr-btn")[3];

btn_next.style.opacity = '0.5';

btn_next.style.pointerEvents = "none";

 

var btn_last = document.querySelectorAll(".fr-btn")[4];

//设置置灰

btn_last.style.opacity = '0.5';

//设置按钮不可用

btn_last.style.pointerEvents = "none";

 

//上一页和首页按钮设置为可用不置灰

var btn_first = document.querySelectorAll(".fr-btn")[0];

btn_first.style.opacity = '1';

btn_first.style.pointerEvents = "visible";

var btn_up = document.querySelectorAll(".fr-btn")[1];

btn_up.style.opacity = '1';

btn_up.style.pointerEvents = "visible";

}else{

var btn = document.querySelectorAll(".fr-btn");

for(var i=0;i < 5;i++){

//按钮置灰

btn[i].style.opacity = '1';

//设置按钮不可用

btn[i].style.pointerEvents = "visible";

}

}}

你这个应该是不支持填报的吧