反馈已提交

网络繁忙

当前为10.0版本文档,只有最新版本的文档支持在线编辑修改,如果想创建/编辑文档,请移步至 最新版帮助文档

JS实现填报自动生成序号并排序

  • 文档创建者:文档助手1
  • 历史版本:42
  • 最近更新:Catqiu 于 2022-11-10
  • 1. 概述

    1.1 问题描述

    在填报录入数据时,希望序号可以自动生成,且新增或删除数据行时,序号不会断开,效果如下图所示:

    222

    1.2 实现思路

    使用 seq() 函数进行排序。由于插入删除行会触发页面的加载结束事件,所以可以在加载结束事件中,利用前端 JS 接口实现每次插入删除行后重新计算序号的效果。

    注:不支持移动端。

    2. 示例一

    2.1 设计报表

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

    图片.png

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

    3)A3 单元格插入公式SEQ() ,左父格设置为 B3 ,如下图所示:

    注:一定要将 A3 单元格左父格设置为 B3 ,因为只有这样新增数据时,序号才会跟着扩展。

    4)G3 单元格添加 「按钮控件」,按钮类型选择「插入行」,指定单元格为 B3,如下图所示:

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

    7) 选中 A3 单元格,设置「单元格属性>其他>插入行策略」为「原值」,如下图所示:

    2.2 设置加载结束事件

    1)菜单栏点击模板>模板Web属性>填报页面设置,选择为该模板单独设置,添加加载结束事件,如下图所示:

    JavaScript 代码如下:

    var $tds = $('.x-table td[col=0][fm="SEQ()"]:visible'); //获取第1列中可见的序号单元格(A列) var n = 0;$tds.each(function(i, e) {	n = n + 1;	$(e).text(n); 	//将当前编号重新设置 })

    该 JS 中的核心语句为:$('.x-table td[col=0][fm="SEQ()"]:visible'),说明如下:

    col=0:获取第一列(A列)

    fm="SEQ()":获取写了 SEQ() 公式的单元格( JS 中 SEQ() 的大小写需和模板中的公式保持一致

    visible:获取可见单元格(排除掉隐藏行)

    2.3 效果预览

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

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

    2.4 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\插入删除行重新编号.cpt

    点击下载模板:插入删除行重新编号.cpt

    2.5 注意事项

    上述方案在插入删除行后显示的序号为显示值,无法提交入库,仅作为页面展示效果。如果希望将序号同时提交入库,需要给对应单元格赋实际值才可以。具体方案为将加载结束事件中的JavaScript 代码替换成如下代码:

    var $tds = $('.x-table td[col=0][idx=0]:visible:not([fmt="T"])');//获取第1列中可见的序号单元格(A列) var n = 0;$tds.each(function(i, e) {	n = n + 1;	var row = $(e).attr("row");	//获取行号	_g().setCellValue(0, 0, row, n);	//将当前编号重新设置 })

    该JS中的核心语句为:$('.x-table td[col=0][idx=0]:visible:not([fmt="T"])'),说明如下:

    col=0:获取第一列(A列)

    idx=0:排除掉序号单元格下方的干扰元素,固定写法无需修改

    not([fmt="T"]):排除掉序号单元格上方的标题元素,固定写法无需修改

    visible:获取可见单元格(排除掉隐藏行)

    注:采用此方案给序号单元格赋实际值,在数据量较大的时候会造成页面卡顿,需视实际情况考虑是否使用。

    3. 示例拓展

    3.1 当模板下面出现其他内容时,对其他内容不进行排序

    3.1.1 问题描述

    填报模板下方还有一些内容和其余的无关,但是点击插入行,ID下面会多出一些字段,而且是有规律的,是ID的序号被延伸下来

    1608646083109779.gif

    3.1.2 解决方案

    1)通过观察模板可以得知,我是多余的这个字段在模板中因为父格关系也会随着变化

    企业微信截图_16680717999834.png

    2)因此修改加载结束后事件的 JavaScript 代码,JavaScript 代码如下:

    var $tds = $('.x-table td[col=0][fm="SEQ()"]:visible'); //获取第1列中可见的序号单元格(A列) var n = 0;$tds.each(function(i, e) {	if(4>i>=2){	n = n + 1;	$(e).text(n); //将当前编号重新设置 	}})window.deleteflag=0;window.appendflag=0;

    3)保存后,填报预览效果如下:

    1608646654230007.gif

    3.2 模板上下都有其余的内容,对其余内容不排序

    3.2.1 问题描述

    填报模板上方以及下方还有一些内容和其余的无关,但是点击插入行,其余的内容会根据编号进行变更

    1608646654230007.gif

    3.2.2 解决方案

    1)修改加载结束后事件的 JavaScript 代码,JavaScript 代码如下:

    if(window.deleteflag==1||window.appendflag==1){//如果是删除或者添加标记的,重新编号     var $tds=$('.x-table td[col=1]:visible:not(:empty)');//判断不为空   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)保存后,填报预览效果如下:

    1608646654230007.gif

    附件列表


    主题: 填报应用
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    请前往「服务平台」,选择「在线支持」

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526