JS控制单选组按钮上下左右居中显示

1. 概述
1.1 问题描述

使用单选按钮组控件时，有时候单元格很大，按钮不居中显示，为了美观，就需要调整按钮使其居中显示，若下图所示：

1.2 实现思路

利用 JS 获取该按钮对象，改变其 CSS 样式。

2. 示例
2.1 添加单选按钮

新建模板，如下图所示设计模板样式，B3 单元格中添加了单选按钮组控件。

注：单选按钮组控件默认勾选自适应，请不要取消勾选，否则和 2.2 节 JS 配合使用时单选按钮会消失。

2.2 添加 JS 事件

选中 B3 单元格控件，在「组件设置>事件」处，为该控件增加一个「初始化后」事件，如下图所示：

JavaScript 代码如下:

1. var el = $(this.element);
   
2. var f = function() {
   
3. var w = 0;
   
4. var cs = el.children();
   
5. if (cs.length == 0) {
   
6.   setTimeout(f, 100);
   
7.   return;
   
8. }
   
9. for (var i=0; i<cs.length; i++) {
   
10.   w += cs.eq(i).width() + 5;
    
11. }
    
12. el.css({
    
13.   width: w,
    
14.   'margin-left': 'auto',
    
15.   'margin-right': 'auto',
    
16.   'height':' auto',
    
17. });
    
18. }
    
19. setTimeout(f, 100);

复制代码

2.3 效果预览

保存模板，选择「填报预览」，效果如下图所示：

注：不支持移动端。

3. 模板下载

已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\43-JS控制单选组按钮上下左右居中显示.cpt

点击下载模板：43-JS控制单选组按钮上下左右居中显示.cpt

单选项目，超过五个的时候，会自动变成2行。