JS对于下拉框数据量大的解决方案

1.1 版本

1.2 问题描述

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

1.3 实现思路

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

2.1 报表设计

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

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 过滤，如下图所示：

2.4 保存模板

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

3.1 报表设计

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

3.2 设置参数

编辑参数面板，选择全部添加，控件值为模糊查询字段：，控件类型分别选择文本控件，如下图所示：

3.3 设置文本控件

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

JS 代码如下：

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

3.4 设置过滤条件

双击 A1 单元格，选择过滤，可选列为 NAME ，操作符为包含，选择参数 $id，如下图所示：

3.5 保存模板

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

4.1 PC 端

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

4.2 移动端

不支持移动端。

1）主模版

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

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

2）子模版

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

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