反馈已提交

网络繁忙

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

  • 文档创建者:lu123
  • 编辑次数:30次
  • 最近更新:RosieY 于 2021-12-20
  • 1. 概述

    1.1 版本

    报表服务器版本
    功能变更
    11.0--

    1.2 问题描述

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

    1.3 实现思路

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

    动画.gif

    2. 主模板设计

    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. 子模板设计

    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.效果预览

    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

    附件列表


    主题: 参数应用
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    在线QQ:800049425

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

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭