JS實現分頁預覽改變指定列的列高/欄寬

1.1 版本

1.2 預期效果

使用者在進行報表設計時，需要改變指定列的列高或改變指定欄的欄寬，如下圖所示：

1.3 實現思路

注：本篇文檔的方案不支援列印和匯出。

可以透過給指定列增加「載入結束」事件，或新增按鈕元件，對按鈕新增「點選事件」實現指定列改變列高。本文將以改變第 3 列的列高為 35，第 3 欄的欄寬為 60 ，為例進行說明。

11.0.10 之前版本儲存格列高相關 JS API可參考：修改列高欄寬API

11.0.10 及之後版本儲存格列高相關 JS API可參考：表格列欄物件API

2.1 範例一

2.1.1 開啟報表

開啟範本：%FR_HOME%webrootWEB-INF/reportlets/demo/NewbieGuide/行式報表.cpt

2.1.2 新增事件

1）11.0.10 之前版本：菜單欄點選「範本>範本 Web 屬性>分頁預覽設定」，選擇「為該範本單獨設定」，然後新增「載入結束事件」，如下圖所示：

 JavaScript 程式碼如下：

_g().setRowHeight(3,35);

2）11.0.10 及之後版本：菜單欄點選「範本>範本 Web 屬性>分頁預覽設定」，選擇「為該範本單獨設定」，然後新增「載入結束事件」，如下圖所示：

 JavaScript 程式碼如下：

_g().getRow(3).setHeight(35);

2.1.3 效果預覽

儲存報表，點選「分頁預覽」，效果如下圖所示：

注：不支援行動端

2.2 範例二

2.2.1 開啟範本

開啟範本：%FR_HOME%webrootWEB-INF eportletsdemoNewbieGuide行式報表.cpt

2.2.2 新增按鈕

1）編輯參數面板，取消勾選「點選查詢前不顯示報表內容」，如下圖所示：

2）新增按鈕元件，將按鈕名稱設定為：改變行高，如下圖所示：

2.2.3 新增點選事件

1）11.0.10 之前版本的JS程式碼為：

_g().setRowHeight(3,35);

如下圖所示：

2）11.0.10 及之後版本JS程式碼為：

_g().getRow(3).setHeight(35);

如下圖所示：

2.2.4 效果預覽

儲存報表，點選「分頁預覽」，效果如 1.2 節所示。

注：不支援行動端

與 2.1 節和 2.2 節範例步驟類似，僅需要修改 JavaScript 程式碼即可，不再重複贅述，以改變表格的第 3 欄的欄寬為 60 為例，如下所示：

1）11.0.10 之前版本的JavaScript 程式碼如下：

_g().setColWidth(3,60)

2）11.0.10 及之後版本的JavaScript 程式碼如下：

_g().getColumn(3).setWidth(60);

1）修改列高和欄寬時，所在的列和欄存在最小列高和欄寬，例如儲存格的列高是 20，裏面的文字內容佔了 18，當調整格子高度是 10 的時候指定列高不會小於文字的高度，調整以後的效果是列高變成 18 。

2）JS API支援將列高調整至 0 。