1. 概述
1.1 问题描述对于一些特殊的查询模板,由于下拉复选框的供选项太多可能导致查询结果过大、页面展示效果不理想等,所以有时候需要限制复选框组选中的个数。例如限制复选框可选中的个数为 5个,若超过 5 个就不能再选,下面我们来介绍下制作方法。 例:事先选中了苹果汁,牛奶,番茄酱,盐,麻油,当想再勾选酱油时,就无法选择并弹出了提示框【最多只能选择 5 个】!
1.2 实现思路通过 JavaScript 获取当前控件的值,然后通过判断选择的个数值并进行操作。 2. 示例
2.1 操作步骤给复选框组控件增加点击事件,如下图: 代码如下: - var Num = 0;
- $.each(this.ck_el_array, function(i, item) {
- if(item.isSelected()) {
- Num++;
- }
- if(Num > 5) {
- FR.Msg.toast("至多只能选择5个");
- item.setSelected(false);
- }
- });
复制代码注:此方法目前仅支持正序选择选项。如果逆序选择,超过5个选项会出现第一个选择的选项不勾选勾选当前选项的情况。 2.2 预览效果保存报表,点击分页预览,报表效果如下图所示:
注:不支持移动端。 注:保存模板,点击分页预览,最多只能选中 5 个复选框的值,否则就会弹出如上对话框。 3. 已完成模板模板效果在线查看请点击:JS 限制复选框(参数面板)选择个数.cpt 已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\06-JS限制复选框(参数面板)选择个数.cpt 模板下载见附件
编辑于 2020-12-16 17:25
编辑于 2020-12-16 17:25
|