01 需求簡介

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

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

02 報表構(gòu)思

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

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

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

03 報表開發(fā)

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

圖一

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

圖二

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

圖三

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

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

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

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

04 報表功能設(shè)置

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

1 篩選功能

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

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

圖四

查詢語句代碼如下：

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 "')")}

標(biāo)黃部分需要根據(jù)自己的實際情況更換表名和字段名。

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

圖五

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

友情提示：點擊控件才能出現(xiàn)控件設(shè)置的相應(yīng)內(nèi)容。

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

2 添加/刪除列設(shè)置

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

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

JavaScript代碼如下

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

圖六

圖七

3 多人填報時如何防止內(nèi)容覆蓋

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

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

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

4 凍結(jié)設(shè)置

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

圖八

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

注2：當(dāng)凍結(jié)的行包括可擴(kuò)展的動態(tài)數(shù)據(jù)時，擴(kuò)展出來的數(shù)據(jù)全部凍結(jié)。

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

05 總結(jié)

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