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