1. 概述
1.1 问题描述
使用决策报表 Tab 块时，默认的 Tab 标题会根据字数自动扩展。若想实现统一宽度，除了「补空格使标题字数一致」的方法外，是否有其他方法实现 Tab 标题手动设置统一宽度呢？如下图所示：
1.2 解决思路
给 Tab 块添加初始化后事件，使用 JavaScript 代码修改 HTML 属性。
注1：和大多数 HTML 修改样式一样，页面放大缩小后会失效，请酌情使用。
注2：该方法不支持决策报表新自适应模式。
2. 示例
2.1 设计报表
1）新建决策报表，将 body 的布局方式修改为「绝对布局」，如下图所示：
2）向 body 中拖入一个 Tab 块，新增几个标题页，并设置长度不一的标题名称。如下图所示：
3）示例为了便于区分，设置 Tab 块填充颜色为灰色。选中整个 Tab 块（tablayout0），点击「属性>高级>样式」编辑按钮，设置「填充」为「颜色」，选择颜色后在左边预览界面可看到样式效果。如下图所示：
2.2 添加事件
选中整个 Tab 块（tablayout0），点击「事件>添加事件」，添加一个「初始化后事件」。如下图所示：
事件中添加一个 tabname 参数（字符型），值为：TABPANE0 ；添加一个 change 参数（整型），值为 100。
注：change 参数的值为标题宽度，实际应用中修改标题宽度可在此修改。
JavaScript 代码如下：
setTimeout (function () {
var nums=$("div[widgetname='"+tabname+"']").find(".fr-widget-click").length; //获取修改个数
var left=[]; //存放修改前的 left 属性
var width=[]; //存放修改前的 width 属性
var new_left=[]; //存放新的 left 属性
var more_width=[]; //存放多出的 width
var temp=1; //记录 left 累加值
for(var i=0;i<nums;i++){
left[i]=($("div[widgetname='"+tabname+"']").find(".fr-widget-click").eq(i*1+1*1).parent().css('left')).replace(/[^0-9]+/ig,""); //给修改前 left 赋值因为第一个不需要动，所以从第二个开始
width[i]=$("div[widgetname='"+tabname+"']").find(".fr-widget-click").eq(i*1).width(); //给修改前 width 赋值
more_width[i] = change*1 - width[i]*1; //计算每次增加的 width
temp=(temp*1)+(more_width[i]*1); //累加每次增加的width
new_left[i]=(temp*1.0)+(left[i]*1.0) ; //计算新的left
$("div[widgetname='"+tabname+"']").find(".fr-widget-click").eq(i*1+1*1).parent().css("left",""+new_left[i]+"px"); //更改 left
}
},100);
setTimeout (function () {
$("div[widgetname='"+tabname+"']").find(".fr-widget-click").css("width",""+change+"px"); // 更改 fr-widget-click 的 width
$("div[widgetname='"+tabname+"']").find(".ui-state-enabled.fr-form-imgboard").css("width",""+change+"px"); // 更改 ui-state-enabled fr-form-imgboard 的 width
},150);2.3 效果预览
保存报表，点击「PC 端预览」，效果如下图所示：
注：不支持移动端。
3. 模板下载
已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\JS实现Tab标题统一宽度.frm
点击下载模板：JS实现Tab标题统一宽度.frm