历史版本27 :JS实现填报自动生成序号并排序 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1问题描述

在填报中录入数据时,我们往往希望数据库中的某列数据是 1,2,3,4......这样的自动增长的数字编号,当插入一条数据时编号自动+1,而删除数据时编号自动-1。

该如何实现这样的效果呢?


222

1.2 实现思路

修改插入行策略,利用JS事件来实现以上效果。

2. 操作步骤编辑

2.1报表设计

1)新建数据库查询数据集 ds1,SQL 语句为:SELECT * FROM Sales

图片.png

2)设计填报表格,将数据集字段拖入对应单元格,表格设计如下图所示:

image.png

3)A3单元格插入任意字符串,B3单元格插入公式 SEQ(A3) ,然后隐藏A列,如下图所示:

图片.png

4)将B3单元格的左父格设置为C3,如下图所示:

图片.png

5)在H3单元格增加 按钮控件,按钮类型选择插入行,指定单元格为C3,并且设置插入行的行数为1行,即点击增加行时只增加一行。

图片.png

6)在I3单元格增加 按钮控件 ,按钮类型选择删除行,指定单元格为C3,如下图所示:

图片.png

2.2设置插入行策略

选中B3单元格,在属性面板的单元格属性表处选择 其他>插入行策略,插入行策略选择原值,如下图:

图片.png

2.3填报页面设置

1)点击模板>模板Web属性>填报页面设置,选择为该模板单独设置,增加三个事件,如下图所示:

图片.png

2)设置删除行前事件,如下图:

图片.png

删除行前 JS 代码:

window.deleteflag=1;

3)设置添加行前事件,如下图:

图片.png

添加行前 JS 代码:

window.appendflag=1;

4)设置加载结束事件,如下图:

图片.png

加载结束 JS 代码:

if(window.deleteflag==1||window.appendflag==1){//如果是删除或者添加标记的,重新编号 
   var $tds=$('.x-table td[col=1]:visible');//获取第2列中可见的单元格(B列)  
   var n=0; 
   $tds.each(function(i,e){ 
     if(i>=2){//模板中从哪一可见行开始编号的,行号是从0开始的,所以用行号-1,比如这个模板是从第3行开始的,就是2           
          n=n+1; 
          $(e).text(n);//将当前编号重新设置 
         } 
   }); 
   window.deleteflag=0;//清除删除行标记 
   window.appendflag=0;//清除添加行标记 
 }

2.4添加报表填报属性

 点击  模板>报表填报属性,添加内置 SQL,如下图所示:
图片.png

填报属性设置可以参考 报表填报属性设置


3.效果预览编辑

1)PC端

保存报表,点击填报预览,效果如下图所示:

2020-08-28_15-36-03.gif


2)移动端:

1598601576178103.gif

注:移动端只支持插入行,不支持删除行


4. 模板下载编辑

在线查看模板效果请点击 插入删除行重新编号.cpt

已完成模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\LineForm\插入删除行重新编号.cpt