JS实现单击控件可直接编辑

1.1 预期效果

填报页面设置中，为了页面整洁，默认不勾选「直接显示控件」，在不设置「直接显示控件」的情况下，需要双击单元格才能进入控件进行编辑，显得比较繁琐，那么如何实现单击单元格或利用键盘 Tab 键选中单元格后进入控件编辑状态呢，如下图所示：

1.2 实现思路

• 方法一：利用 contentPane.on 事件来监测单元格选择动作，检测到后对选择的单元格设置编辑事件。

• 方法二：利用 contentPane 提供的 setEditOnClick() 与 setEditOnMove() 来设置点击或键盘按下 Tab 键时编辑单元格。

以上两种方法均可以实现预期效果，方法一可以结合其他代码一起使用，比如要实现 自定义添加删除行按钮 效果都会用到此方法。

2.1 方法一 

准备一个填报模板后，为该模板添加「加载结束」事件，如下图所示：

JavaScript 代码如下：

//监测单元格选择事件
contentPane.on('cellselect',function(td){
//对选择的单元格调用编辑事件
contentPane.curLGP.editTDCell(td);
})

2.2 方法二 

准备一个填报模板后，为该模板添加「加载结束」事件，如下图所示：

JavaScript 代码如下：

//设置点击单元格时直接编辑
contentPane.setEditOnClick(true);
//设置使用Tab键移动光标选择单元格时直接编辑
contentPane.setEditOnMove(true);

2.3 预览效果

保存模板，选择填报预览，实现效果下图所示：

方法一

方法二

注：不支持移动端。

方法一

已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\18-JS实现单击控件可直接编辑方法一.cpt

点击下载模板 ：18-JS实现单击控件可直接编辑方法一.cpt

方法二

已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\18-JS实现单击控件可直接编辑方法二.cpt

点击下载模板：18-JS实现单击控件可直接编辑方法二.cpt