js实现单击控件可直接编辑
1. 概述
在填报应用中，可以直接设置显示控件，但是在模板中如果控件较多的情况下，会导致页面加载速度非常慢，有时内容多时显示控件也会导致页面不美观，不得已需要放弃直接显示控件。这样默认的情况下需要双击单元格才能进入控件进行编辑，显得比较繁琐，而且如果只是单击或使用Tab键选择单元格时，直接编辑输入汉字时第一个拼音字母会被单元格吃掉，导致输入出错出错，如下图：
那么如何实现选择一次单元格后自动进入编辑状态呢，如下图
2. 实现思路
2.1 方法一
利用contentPane.on事件来监测单元格选择事件，在选择单元格事件中对选择的单元格设置编辑事件。
2.2 方法二
利用contentPane提供的setEditOnClick()与setEditOnMove()来设置点击或键盘按下tab键来移动光标选择单元格时是否直接编辑。
3. 实现过程
3.1 方法一实现过程
为模板添加加载结束事件，如下图
代码如下：
//监测单元格选择事件
contentPane.on('cellselect',function(td){
//对选择的单元格调用编辑事件contentPane.curLGP.editTDCell(td);
})
注：此方法适用于直接鼠标选择或Tab键来选择单元格后直接显示并编辑控件
3.2 方法二实现过程
为模板添加加载结束事件，如下图
代码如下：
//设置点击单元格时直接编辑
contentPane.setEditOnClick(true);
//设置使用Tab键移动光标选择单元格时直接编辑
contentPane.setEditOnMove(true);
3.3 总结
以上两种方法均可以实现选择单元格后直接显示控件并编辑，提高我们报表的易用性和更好的交互体验。
方法一可以结合其他代码一起使用，比如自定义添加删除行按钮或JS去除填报左上角红色三角等效果都会用到此方法
方法二更简单直观，但是使用时必须把两行代码全加上，一个是控制鼠标选择单元格，一个是控制Tab键来选择单元格
附件列表
主题： 二次开发
标签：
已验证