列式填報

1. 列式填報表是指需要填報的部分滿足網格式報表特徵的填報表，即清單明細報表，記錄是一行一行的。

2. 列式填報表可以實現通過增加、插入、刪除列進行資料的編輯處理。
   

1

新建資料集ds1。

1. 輸入SQL：SELECT * FROM 產品 limit 15。

2. 新建資料集，可參考A03-01 內建資料集。

2

插入資料。

1. 按住shift，選中【產品ID】到【庫存量】欄位，拖入B3儲存格，選擇從左往右展開。

2. 在【B2:I2】儲存格中插入報表標題。

3. 插入資料欄，可參考A05-00 插入資料欄。

3

設定元件。

1. 選中【B3:I3】儲存格，點擊元件設定，選擇文字元件。

2. 元件設定，可參考A08-00 文字元件。

4

調整報表樣式。

1. 設定【B2:I3】儲存格文字居中顯示，新增框線顏色為#E5E9F1。

2. 設定【B2:I2】儲存格背景顏色為#EEF1F8。

5

設定報表填報屬性。

1. 點擊【範本】→【報表填報屬性】，點擊【+】按鈕，選擇內建SQL。

2. 提交型別保持預設【智慧提交】，資料庫選擇【FRDemoTW】，資料表選擇【產品】。

3. 點擊【智慧新增欄位】，將產品ID到庫存量欄位進行勾選，點擊確定，欄位智慧新增到填報設定介面。

4. 點擊【產品ID】欄位前的方框勾選，設定產品ID為主鍵。

5. 點擊【智慧新增儲存格】，依次點擊B3:I3儲存格後，點擊確定，各欄位對應的值智慧新增到填報設定介面。

6. 點擊確定，填報屬性設定完成。

7. 報表填報屬性設定，可參考A11-11 範本-報表填報屬性。

6

設定網頁填報預覽屬性。

1. 點擊【範本】→【範本Web屬性】→【填報頁面設定】。

2. 選擇【為該範本單獨設定】，滑鼠選到【刪除記錄】按鈕點擊兩下，將刪除記錄按鈕新增到頁面上方工具欄。

3. 滑鼠左鍵點擊兩下【刪除記錄】圖標，點擊上移按鈕，調整圖標位置。

4. 點擊確定，完成填報預覽頁面設定。

7

點擊填報預覽，在瀏覽器中查看效果。

1. 選中某一儲存格，滑鼠左鍵點擊兩下，將儲存格中的內容全部選中，可修改儲存格中的內容。

2. 點擊【新增記錄】按鈕，可在當前儲存格下方插入列，在列中的儲存格中輸入資料。

3. 選中某一儲存格，點擊【刪除欄列】按鈕，可刪除當前列。

4. 點擊【提交】，提示成功則修改後的資料填報入設定的資料庫中。

1

自訂按鈕實現插入刪除列。

1. 選中J3儲存格，點擊【元件設定】，選擇按鈕元件。

2. 按鈕型別選擇【插入列】，按鈕圖示保持預設。

3. 指定儲存格選擇B3，列數設定1，每次點擊按鈕則插入一列。

4. 選中K3儲存格，點擊【元件設定】，選擇按鈕元件。

5. 按鈕型別選擇【刪除列】，按鈕圖示保持預設，指定儲存格選擇B3。

6. 按鈕元件設定，可參考A08-04 按鈕元件。

2

點擊填報預覽，在瀏覽器中查看效果。

1. 點擊插入列按鈕，在下方插入一列。

2. 點擊刪除列按鈕，則刪除當前列。

3

自訂提交入庫按鈕。

1. 自訂提交按鈕功能效果同工具欄中的提交按鈕，但可設定不同的樣式，增強視覺效果。

2. 選中K2儲存格，點擊【元件設定】，選擇按鈕元件，設定按鈕名字為提交。

3. 點擊【事件】，點擊【+】按鈕，選擇點擊事件。

4. 輸入JS腳本：_g('${sessionID}').writeReport();

4

點擊填報預覽，在瀏覽器中查看效果。

1. 修改資料後，點擊自訂的提交按鈕，顯示成功即將資料提交入庫。

5

設定批量刪除。

1. 當需要刪除多條資料記錄時，可以通過JS結合元件的方式，實現選中多列資料批量刪除。

2. 選中L3儲存格，點擊【元件設定】，選擇複選按鈕元件。

3. 選中L2儲存格，點擊【元件設定】，選擇按鈕元件，設定元件名為刪除勾選。

4. 點擊【事件】，點擊【+】按鈕，選擇點擊事件。

5. 輸入JS腳本：

6. var $span = $('.fr-checkbox-checkon'); //定義選中的複選框 
   var darray = []; 
   var $tds = $("td").has($span); //定義選中複選框的單元格 
   for (var i = 0, len = $tds.length; i < len; i ++) { //遍歷選中的儲存格 
   var id = $($tds[i]).attr("id"); //給選中的儲存格加上id的屬性 
   if (id) { 
   darray.push(id); //將選中的id放入到陣列中 
   }
   }contentPane.deleteReportRC(null,darray); //第二個參數為批量刪除的選中列
   contentPane.writeReport();

7. 複選按鈕元件的具體設定，可參考A08-05 複選按鈕元件。

6

點擊預覽，在瀏覽器中查看效果。

1. 選中需要刪除的資料後的方框，點擊刪除勾選按鈕，提示成功則資料刪除成功。

7

自訂按鈕實現單列提交。

1. 系統預設的提交按鈕，會將整個報表全部提交，可以通過自訂按鈕的方式，實現只提交某一列資料，其他被修改的資料不會被提交入庫。

2. 選中M3儲存格，點擊【元件設定】，選擇按鈕元件，設定元件名為單列提交。

3. 點擊【事件】，點擊【+】按鈕，選擇點擊事件，切換JS腳本為提交入庫。

4. 資料庫選擇【FRDemoTW】，資料表選擇【產品】，與上文相同，智慧新增欄位和綁定儲存格，將產品ID設定為主鍵。

8

自訂提交提示。

1. 選中M3儲存格，點擊【事件】，點擊【】按鈕。

2. 點擊【設定回調函式】，輸入JS腳本：

3. if (fr_submitinfo.success) {
   FR.Msg.toast('提交成功');
   setTimeout("location.reload();", 3000 ) 
   } else {
   FR.Msg.toast('提交失敗');
   }

9

點擊預覽，在瀏覽器中查看效果。

1. 修改多列資料內容，點擊某一列後的單列提交按鈕，提示提交成功則資料修改入庫。

2. 提交後其餘被修改的資料恢復原來的內容。

1

設定下拉框元件1。

1. 選中E3儲存格，點擊【元件設定】，將文字元件修改為下拉框元件。

2. 點擊【...】設定資料字典，選擇資料庫【FRDemoTW】，資料表選擇【產品類別】。

3. 設定實際值為【類別ID】，顯示值為【類別名稱】，點擊確定。

4. 下拉框元件的具體設定，可參考A08-08 下拉框元件。

2

設定下拉框元件2。

1. 通過設定儲存格形態，使報表預設的顯示值與下拉框中的顯示值保持一致。

2. 選中E3儲存格，點擊【儲存格屬性】→【形態】，選擇【資料字典】。

3. 選擇資料庫【FRDemoTW】，資料表選擇【產品類別】，設定實際值為【類別ID】，顯示值為【類別名稱】。

4. 儲存格形態的設定，可參考A06-08 形態-資料字典。

3

設定數字元件。

1. 當需要儲存格只允許輸入數字時，可通過設定數字元件的方式實現。

2. 選中【G3:H3】儲存格，點擊【元件設定】，將文字元件修改為數字元件。

3. 點擊【允許負數】前面的方框，取消勾選，單價和成本價不能為負數。

4

點擊填報預覽，在瀏覽器中查看效果。

1. 產品類別可通過下拉框進行選擇。

2. 在成本價和單價中輸入負數，右側會提示報錯。

1

內建提交校驗。

1. 使用者可以在填報中設定校驗方式，實現資料的規範輸入。

2. 點擊【範本】→【報表填報屬性】，選擇【資料校驗】。

3. 點擊【+】按鈕，新增【內建校驗】。

4. 在介面右側，點擊【+】按鈕，添加一條校驗內容，設定校驗公式為H3>G3，校驗出錯資訊為“單價必須大於成本價”。

2

點擊填報預覽，在瀏覽器中查看效果。

1. 修改單價後點擊提交，彈出報錯提示。