1. 概述编辑
1.1 问题描述
在做填报报表时,在某些特定情况下需要设置某个控件为焦点并可编辑,如下图的示例,文本框默认为不可用状态,如何实现点击编辑按钮使文本框变为可用并设置为焦点可编辑状态?
1.2 实现思路
给按钮增加点击事件使得文本控件可用
2. 示例编辑
2.1 模板属性设置
点击模板>模板 Web 属性>填报页面设置,选择为该模板单独设置,勾选直接显示控件:
2.2 报表样式
如下所示添加文本控件和按钮控件:
文本控件,设置控件名为 test,默认不可用:
按钮控件,设置按钮名称为编辑,点击事件编辑,添加“点击”事件,如下所示:
2.3 JS 代码设置
1)方法一
编辑点击事件,添加下面的JS代码:
var self =contentPane.getWidgetByName("test");
self.setEnable(true);
var myFocusID = setInterval(
function()
{
self.editComp.focus();
}, 20);
JS 代码说明:
var self =contentPane.getWidgetByName("test"); //获取文本控件,test 为文本控件的控件名
self.setEnable(true); //设置文本控件为可用
self.editComp.focus(); //将文本控件设置为焦点
注:方法一必须勾选直接显示控件,否则只能实现可编辑而不会自动成为焦点
2)方法二
或者使用下面的 JS 代码:
var self =contentPane.getWidgetByName("test");
self.setEnable(true);
var cell = contentPane.curLGP.getTDCell(1,1);
setTimeout(
function()
{
contentPane.curLGP.selectTDCell(cell);
setTimeout(
function(){
contentPane.curLGP.editTDCell(cell);
},20);
},20)
JS 代码说明:
var cell = contentPane.curLGP.getTDCell(1,1); //获取焦点所在的单元格对象,getTDCell(1,1)即 B2 单元格
contentPane.curLGP.selectTDCell(cell); //选择单元格
contentPane.curLGP.editTDCell(cell);/ //编辑单元格,即聚焦单元格
保存模板,点击填报预览即可查看效果,点击编辑按钮使文本框变为可用并设置为焦点可编辑状态,如上图。
2.4 预览效果
保存模板,点击填报预览,PC 端效果如下所示:注:此 JS 不支持移动端使用
3. 模板下载编辑
1)方法一
模板效果在线查看请点击:JS 设置控件焦点方法一.cpt
已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\25-JS设置控件焦点方法一.cpt
点击下载模板:25-JS设置控件焦点方法一.cpt
2)方法二
模板效果在线查看请点击:JS 设置控件焦点方法二.cpt
已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\25-JS设置控件焦点方法二.cpt
点击下载模板:25-JS设置控件焦点方法二.cpt