JS设置控件焦点

编辑
文档创建者:cherishdqy (66470 )     浏览次数:4931次     编辑次数:10次     最近更新:jiangsr 于 2018-05-31     

目录:

1. 描述编辑

在做填报报表时,在某些特定情况下需要设置某个控件为焦点并可编辑,如下图的示例,文本框默认为不可用状态,如何实现点击编辑按钮使文本框变为可用并设置为焦点可编辑状态?

222

2. 思路编辑

给按钮增加点击事件使得文本控件可用

3. 操作步骤编辑

3.1 模板属性设置

点击模板>模板Web属性>填报页面设置,选择为该模板单独设置,勾选直接显示控件:

222

3.2 报表样式

如下所示添加文本控件和按钮控件:

222

文本控件,设置控件名为test,默认不可用:

222

按钮控件,设置按钮名称为编辑,点击事件编辑,添加“点击”事件,如下所示:

222

3.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);/   //编辑单元格,即聚焦单元格

保存模板,点击填报预览即可查看效果,点击编辑按钮使文本框变为可用并设置为焦点可编辑状态,如上图。

4. 预览效果编辑

4.1 PC端预览效果

222

4.2 移动端预览效果

注:此JS不支持移动端使用

5. 已完成模板编辑

1)方法一
模板效果在线查看请点击:JS设置控件焦点方法一.cpt
已完成的模板,可参见:%FR_HOME%\WebReport\WEB-INF\reportlets\doc\JS\填报预览JS实例\25-JS设置控件焦点方法一.cpt
2)方法二
模板效果在线查看请点击:JS设置控件焦点方法二.cpt
已完成的模板,可参见:%FR_HOME%\WebReport\WEB-INF\reportlets\doc\JS\填报预览JS实例\25-JS设置控件焦点方法二.cpt

附件列表


主题: 二次开发
如果您认为本文档还有待完善,请编辑

文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

此页面有帮助吗?