01 需求簡介

最近從沒有接觸過Finereport（以下簡稱帆軟）的我收到了老板安排的新任務：用Finereport制作各區(qū)域現階段KPI填報報表，填報完成后需要在前臺頁面中展示所有區(qū)域的KPI，本填報報表的目的是可以讓老板快速了解各區(qū)域的KPI和相應完成情況。老板希望各區(qū)域名稱按行展示，各KPI按列展示，并可以靈活刪減，同時具備搜索功能，以及展示KPI編輯人的功能也必不可少。

對于從未接觸過帆軟報表的我，這個需求聽起來不難，但是在制作過程中由于我熟練度欠缺，遇到了各種坑，下面我將分享避坑指南。

02 報表構思

基于以上需求，可以先用excel構思報表樣式，然后再構思數據庫中表的設計，便于在帆軟中進行開發(fā)，我的報表可以展示成以下形式。

根據excel中設計的表格樣式，在數據庫中建表并設計主鍵，針對本案例需要把KPI和編輯人設計成聯合主鍵，有兩點原因：

1. KPI列需要橫向擴展，由于帆軟軟件要求，這一列需要設置成主鍵（橫向擴展：隨著業(yè)務的開展未來會有很多列來記錄KPI，這些列橫向排列）；
2. 為防止多人填報時內容被覆蓋，需要把編輯人也設置為主鍵（后文會詳細解釋）。雖然把KPI設置成為主鍵，但從業(yè)務角度而言，是完全可以重復的，但是編輯人不會重復的，因為員工的ID是不能重復的，因此把KPI 員工ID設置成聯合主鍵，來確保該員工填寫KPI的唯一性。

03 報表開發(fā)

構思好報表樣式后就可以在帆軟中進行開發(fā)了，搭建好的報表如圖一所示。

圖一

帆軟默認數據設置為分組，但是，對于我們設置橫向擴展的填報報表是不可以的，所以要把數據設置為列表，如果有很多行，怕麻煩，最起碼也要把橫向擴展的主鍵設置成列表，讓它“帶動”著其他行一起擴展。修改好后，原來表格中的.G就會變成.S(見圖二)，接下來。要在單元格屬性中把KPI列的擴展方向設置為橫向。

圖二

接下來，可以為需要填報的內容設置控件，例如設置下拉框控件，有是，否，部分，待定四個選項，用來反映某城市或省份是否有這個KPI, 僅部分網點有這個KPI，不清楚是否有這個KPI這些情況。并通過數據字典記錄，具體操作請參考圖三。

圖三

如果在數據報表中已經有了相關選項的收錄，可以直接使用數據報表和數據查詢得到選項。設計好填報表格，添加填報控件之后，需要將填報數據的單元格與數據庫表字段進行綁定，確保填報的數據可以錄入到對應的數據庫表字段下。

設計器菜單欄點擊模板>報表填報屬性，設置界面默認選擇提交，點擊 ，選擇內置SQL即可。選擇提交類型即選擇數據入庫的方式，共有 4 種方式可供選擇，我一般選擇智能提交，然后選擇數據庫和表是為了獲取數據庫表字段，用于后面綁定填報單元格。隨后添加字段，有 2 種方式：智能添加字段和添加字段。

• 智能添加字段：當需要添加的字段較多時，可以使用這種批量操作的方式，點擊按鈕后，默認選中表中全部字段，將不需要綁定的字段去掉勾選即可。
• 添加字段：當需要添加的字段很少時，可以用這種手動一個一個添加的方式。

點擊智能添加單元格，將填報單元格跟數據庫表字段進行綁定，操作方式為手動選取填報單元格，同時還需要設置主鍵。主鍵用于確認需要根據哪個或者哪幾個字段來進行更新和刪除操作，相當于 SQL 中 where 的效果，和數據庫的主鍵不是一個概念。如果涉及到修改或刪除需求，那么必須勾選一個或多個主鍵。

04 報表功能設置

至此報表基本可以滿足記錄內容的需求，但達到讓用戶順利使用的效果，還遠遠不夠，下面我將為大家分享可以優(yōu)化的部分。

1 篩選功能

隨著業(yè)務的開展未來將有許多KPI，為了快速檢索出用戶想得到的KPI，篩選功能不可缺少，以下步驟將介紹如何新建參數，添加篩選。步驟如圖四：

1. 新建數據集
2. 填寫查詢語句（見下文）
3. 點擊“筆”圖表，調出參數面板，顯示創(chuàng)建好的參數，并點擊參數
4. 根據業(yè)務需求，選擇合適的控件。本文以下拉復選框控件為例

圖四

查詢語句代碼如下：

SELECT * FROM `fine_test`where 1=1${IF(LEN(KPI) = 0,""," AND [KPI] IN ('" KPI "')")}

SELECT * FROM `fine_test`

where 1=1

${IF(LEN(KPI) = 0,""," AND [KPI] IN ('" KPI "')")}

標黃部分需要根據自己的實際情況更換表名和字段名。

做好這一步之后，下一步在數據字典中添加需要篩選的列，簡單來說就是distinct要篩選的列，并存入數據字典中，同時設置分隔符，操作步驟如圖五所示：

圖五

總結來說就是新建數據集用于存放篩選列的值，然后在數據字典中選擇剛剛新建的數據集。設置數據字典這一步很重要，如果不設置的話，會出來篩選列表為空的現象。

友情提示：點擊控件才能出現控件設置的相應內容。

至此，篩選功能已設置完成，下一步是添加/刪除列設置，對于第一次接觸的我是有一定難度的。

2 添加/刪除列設置

目前，設置好的報表如圖六所示，需要新增的功能是在報表上方增加添加/刪除列按鈕，具體操作為（圖七）：

1. 在報表上方增加添加/刪除列按鈕控件
2. 指定單元格：指定的單元格必須是需要橫向擴展的單元格
3. 在單元格屬性中修改上父格，上父格設計思路可以“簡單粗暴”的理解為，需要跟隨哪個單元格進行擴展，以本文為例，E4需要橫向擴展，所以不管是按鈕控件的指定單元格還是單元格屬性中的上父格，都應設置為E4。
4. 防止填報第一列數據被刪除：存在插入刪除列按鈕的模板，如果只剩一列數據時點擊了刪除列，那后續(xù)就無法再新增列了，因為頁面上沒有插入列按鈕了，這將對用戶非常不友好。那么如何實現第一列數據禁用刪除行按鈕呢？
5. 給E2單元格的刪除行按鈕設置控件名稱為sc，并設置為不可用。
6. 點擊模板>模板 Web 屬性>填報頁面設置，選擇「為該模板單獨設置」，增加一個「加載結束」事件

JavaScript代碼如下

var arr = ['sc'];//定義需要執(zhí)行事件的刪除行按鈕名稱數組，如有多組則寫法為['sc1','sc2']for (i = 0; i < arr.length; i ) { var kj = $('[widgetname="' arr[i].toUpperCase() '"]:visible'); //獲取頁面上可見的刪除行按鈕元素 var sc = _g().getWidgetsByName(arr[i].toUpperCase()); //根據名字獲取刪除行按鈕 for (j = 0; j < sc.length; j ) { kj.length <= 1 ? sc[j].setEnable(false) : sc[j].setEnable(true); //當控件只剩1個時，禁用控件，否則遍歷啟用所有控件 }}

圖六

圖七

3 多人填報時如何防止內容覆蓋

在多人同時填報一個模板的時候，可能會出現后填報的內容覆蓋掉先填報的內容的問題。會出現覆蓋問題的原因，是因為主鍵沒有根據用戶區(qū)分，所以不同人提交的時候，可能出現主鍵一致的現象。根據提交邏輯，主鍵一致會執(zhí)行更新操作，這就造成了上述問題。解決方案就是增加一個可以區(qū)分用戶的主鍵，這就是我在最開始設置時會把編輯人也設置成主鍵的原因。

具體做法是將填報人字段的值設置為公式：$fine_username，這樣提交時會將填報者的用戶名填寫到數據庫填報人這個字段中去。

注：$fine_username需要登錄后才能正常獲取當前的用戶名。

4 凍結設置

填報預覽時，如果列數和行數較多，拖動滾動條查看數據時，希望標題行或者某些部分可以固定不動，菜單欄點擊模板>重復與凍結設置，即可進入設置界面，如圖八所示：

圖八

注1：凍結必須從首行或者首列開始設置，不支持從中間設置凍結，不支持單獨凍結尾行和尾列。

注2：當凍結的行包括可擴展的動態(tài)數據時，擴展出來的數據全部凍結。

注3：凍結的行列有合并單元格時，需要凍結合并單元格的全部行列。

05 總結

本文為大家分享了帆軟填報功能的常規(guī)步驟，從創(chuàng)建數據庫到報表搭建，再到功能設置，可以基本滿足業(yè)務需要。由于作者能力所限，還有很多需要改進的地方，歡迎指正。