【参数界面JS实例】JS实现下拉复选框非顺序选择后的值顺序显示

1. 概述
1.1 问题描述

在报表应用中，会经常用到下拉复选框，但是默认的下拉复选框的值是根据选择的先后顺序来进行显示的，有些情况下用户选择值的顺序不是按照从前到后，这时下拉复选框的值并不会按照备选选来排序，在动态列应用或提交下拉复选框值的时候会看起来比较乱，如下图：

我们需要提交的时候也是按照备选项顺序来显示的，如下效果：

这种效果如何实现呢？

1.2 实现思路

利用 JavaScript 获取下拉复选框所有备选项值，在编辑结束之后，再将当前复选框值按照所有备选框顺序排序一次。

2. 示例
2.1 操作步骤

1）打开模板%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Parameter\DynamicCol\DynamicCol1.cpt

2）为了方便观察最终效果，我们可以将下拉复选框宽度调宽：

3）为下拉复选框设置编辑结束事件：

JavaScript 代码如下:

1. //获取下拉复选框所有备选项
   
2. var obj = contentPane.parameterEl.getWidgetByName('col').options.data.options.dataSource.data;
   
3. //把备选项存入数组
   
4. pArrayvar pArray = [];
   
5. $.each(obj, function(i, v) {
   
6.     pArray.push(v.value);})
   
7.    
   
8. //获取当前值存入cArray,由于不论控件是选择数组还是字符串，都会带逗号，因此要分割为无逗号模式
   
9. var v = this.getValue() + '';
   
10. var cArray = [];cArray = v.split(',');
    
11. //alert(cArray);
    
12. 
    
13. //用于判断原始数组是否包含再乱序cArray中，是则返回1
    
14. function isChild(element) {
    
15.      return cArray.indexOf(element) >= 0;//indexOf用于判断element在cArray中的位置，不存在则返回-1
    
16.      }
    
17.      
    
18. //将原始数组进行筛选，如果存在cArray中则提取出来，按照原始数组的顺序存储至newAarray
    
19. var newArray = pArray.filter(isChild);
    
20. 
    
21. //数组转字符串，并设置到下拉复选框中
    
22. this.setValue(newArray.toString());

复制代码

2.2 预览效果

保存模板，点击分页预览，PC 端效果如下所示：

注：不支持移动端。

3. 模板下载

模板效果在线查看请点击：JS 实现下拉复选框非顺序选择后的值顺序显示.cpt

已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\14-JS实现下拉复选框非顺序选择后的值顺序显示.cpt

模板见附件