历史版本26 :JS对于下拉框数据量大的解决方案 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 问题描述

在使用下拉框复选框时,若遇到下拉框复选框中的数据量很大时,比如有上万条选项,虽然使用模糊搜索功能但仍无法在下拉框中加载全部项,怎么解决使之在数据量大时能够展示全部项呢?

1.2 实现思路

在主模板中使用文本框,点击一个按钮时,引用一个 JS,使其弹出一个对话框,对话框中嵌入下拉项的模板(因模板中的数据量是不受限制的),在此模板列出的所有下拉项中全部选项,点击需要查询的数据返回到主模板的文本框中进行查询。效果如下图所示:

动画3.gif

2. 主模板设计编辑

2.1 报表设计

新建数据集 ds1:SELECT * FROM STSCORE ,将所有字段拖拽到 A2-F2,按照如下样式设计模板,如下图所示:

222

2.2 设置模板参数

新建模板参数,名字为 p1 ,编辑参数面板,选择全部添加,再添加一个按钮类型控件,并将按钮命名为选择记录, 添加点击事件,写入如下 JS 语句,如下图所示:

JS 代码如下:

var url = encodeURI(encodeURI("${servletURL}?viewlet=doc/Parameter/下拉框数据量大-参数界面子模版.cpt"));
var $iframe = $("<iframe id='inp' name='inp' width='100%' height='100%' scrolling='no' frameborder='0'>");
$iframe.attr("src", url);
var o = {
        title: "请选择记录项",
        width: 700,
        height: 400
};
FR.showDialog(o.title, o.width, o.height, $iframe, o);

2.3 设置过滤条件

双击 A2 单元格,添加过滤条件,NAME 字段用 $p1 过滤,如下图所示:

222

2.4 保存模板

点击保存,模板命名为下拉框数据量大-参数界面主模板

3. 子模板设计编辑

3.1 报表设计

新建普通报表,新建数据集 ds1 :SELECT * FROM STSCORE where name like '%${if(len(id)=0,"error",id)}%' ,将 NAME 字段拖至 A1 单元格,如下图所示:

3.2 设置参数

新建模板参数,名字为 name ,编辑参数面板,选择全部添加,控件值分别为模糊查询字段:name,控件类型分别选择文本控件下拉复选框控件,下拉复选框控件的数据字典类型设置为数据查询,数据集为 ds1 ,实际值和显示值均为 NAME,如下图所示:

2021-08-10_13-44-05.png

3.3 设置文本控件

选择 A1 单元格,控件设置为文本控件,控件名称为 record ,选择超级连接,增加 JS 脚本,添加参数 val ,值选择插入公式 $$$ ,如下图所示:

69cc459ca89807769a9324d56092180.png

JS 代码如下:

parent._g().parameterEl.getWidgetByName("p1").setValue(val);
//给父窗口参数面板的文本控件p1赋值
window.parent.FR.closeDialog();
//关闭对话框
window.parent.FR.destroyDialog();

3.4 保存模板

点击保存,模板命名为下拉框数据量大 - 参数界面子模板

4.效果预览编辑

4.1 PC 端

主模板中选择「分页预览」,预览效果如本文 1.2 节所示。

4.2 移动端

不支持移动端。

5. 已完成模板编辑

1)主模版

已完成模板可参见:%FR_HOME%\webroot\WEB-INF\reportlets\doc\Parameter\下拉框数据量大-参数界面主模板.cpt

点击下载模板:下拉框数据量大-参数界面主模板.cpt

2)子模版

已完成模板可参见:%FR_HOME%\webroot\WEB-INF\reportlets\doc\Parameter\下拉框数据量大-参数界面子模板.cpt

点击下载模板:下拉框数据量大-参数界面子模版.cpt