育將電腦工作室 - 線上書籍

GAS+LineBot開發
=============

一、商品展示

1. 如圖 
 ![](https://i.imgur.com/aA6mXPg.jpg)
2. 規劃欄位 
 1. <table id="table"> <thead> <tr> <td data-field="form_sort">表單順序
 
 </td> <td data-field="form_label">表單標題
 
 </td> <td data-field="form_name">form\_name
 
 </td> <td data-field="form_kind">表單類型
 
 </td> <td data-field="value_type">資料型別
 
 </td> <td data-field="form_width">表單寬度
 
 </td> <td data-field="form_validate">表單驗證
 
 </td> <td data-field="form_fun">表單功能
 
 </td> <td data-field="form_value">表單預設值
 
 </td> <td data-field="form_control">欄位控制
 
 </td> <td data-field="form_readonly">表單唯讀
 
 </td> <td data-field="form_option">表單選項
 
 </td> <td data-field="form_readme">表單說明
 
 </td> <td data-field="form_placeholder">表單暫留字
 
 </td> <td data-field="list_visible">列表顯示
 
 </td> <td data-field="list_align">列表對齊
 
 </td> <td data-field="list_sortable">列表排序
 
 </td> <td data-field="list_width">列表寬度
 
 </td> </tr> </thead> <tbody id="tbody"> <tr data-index="0" data-uniqueid="77" id="tr_77"> <td style="text-align: center;">1 </td> <td>流水號 </td> <td>sn </td> <td>隱藏 </td> <td> </td> <td style="text-align: center;">2 </td> <td style="text-align: center;"> </td> <td> </td> <td> </td> <td style="text-align: center;">true </td> <td> </td> <td> </td> <td> </td> <td> </td> <td style="text-align: center;">false </td> <td style="text-align: center;">left </td> <td style="text-align: center;">false </td> <td> </td> </tr> <tr data-index="1" data-uniqueid="78" id="tr_78"> <td style="text-align: center;">2 </td> <td>啟用 </td> <td>enable </td> <td>下拉選單 </td> <td>文字 </td> <td style="text-align: center;">2 </td> <td style="text-align: center;"> </td> <td> </td> <td style="text-align: center;">是 </td> <td style="text-align: center;">true </td> <td style="text-align: center;"> </td> <td style="text-align: center;">|是 </td> <td> </td> <td> </td> <td style="text-align: center;">true </td> <td style="text-align: center;">center </td> <td style="text-align: center;">false </td> <td> </td> </tr> <tr data-index="2" data-uniqueid="79" id="tr_79"> <td style="text-align: center;">3 </td> <td>順序 </td> <td>sort </td> <td>簡答 </td> <td> </td> <td style="text-align: center;">2 </td> <td style="text-align: center;"> </td> <td> </td> <td style="text-align: center;"> </td> <td style="text-align: center;">true </td> <td style="text-align: center;"> </td> <td style="text-align: center;"> </td> <td> </td> <td> </td> <td style="text-align: center;">true </td> <td style="text-align: center;">left </td> <td style="text-align: center;">false </td> <td> </td> </tr> <tr data-index="3" data-uniqueid="80" id="tr_80"> <td style="text-align: center;">4 </td> <td>商品名稱 </td> <td>title </td> <td>簡答 </td> <td>文字 </td> <td style="text-align: center;">4 </td> <td style="text-align: center;">必填 </td> <td> </td> <td style="text-align: center;"> </td> <td style="text-align: center;">false </td> <td style="text-align: center;"> </td> <td style="text-align: center;"> </td> <td> </td> <td> </td> <td style="text-align: center;">true </td> <td style="text-align: center;">left </td> <td style="text-align: center;">true </td> <td> </td> </tr> <tr data-index="4" data-uniqueid="81" id="tr_81"> <td style="text-align: center;">5 </td> <td>商品單價 </td> <td>price </td> <td>簡答 </td> <td> </td> <td style="text-align: center;">2 </td> <td style="text-align: center;">必填 </td> <td> </td> <td style="text-align: center;"> </td> <td style="text-align: center;">false </td> <td style="text-align: center;"> </td> <td style="text-align: center;"> </td> <td> </td> <td> </td> <td style="text-align: center;">true </td> <td style="text-align: center;">left </td> <td style="text-align: center;">false </td> <td> </td> </tr> <tr data-index="5" data-uniqueid="82" id="tr_82"> <td style="text-align: center;">6 </td> <td>商品單位 </td> <td>unit </td> <td>簡答 </td> <td>文字 </td> <td style="text-align: center;">2 </td> <td style="text-align: center;">必填 </td> <td> </td> <td style="text-align: center;"> </td> <td style="text-align: center;">false </td> <td style="text-align: center;"> </td> <td style="text-align: center;"> </td> <td> </td> <td> </td> <td style="text-align: center;">true </td> <td style="text-align: center;">left </td> <td style="text-align: center;">false </td> <td> </td> </tr> <tr data-index="6" data-uniqueid="83" id="tr_83"> <td style="text-align: center;">7 </td> <td>商品內容 </td> <td>content </td> <td>段落 </td> <td>文字 </td> <td style="text-align: center;">12 </td> <td style="text-align: center;">必填 </td> <td> </td> <td style="text-align: center;"> </td> <td style="text-align: center;">false </td> <td style="text-align: center;"> </td> <td style="text-align: center;"> </td> <td> </td> <td> </td> <td style="text-align: center;">false </td> <td style="text-align: center;">left </td> <td style="text-align: center;">false </td> <td> </td> </tr> <tr data-index="7" data-uniqueid="84" id="tr_84"> <td style="text-align: center;">8 </td> <td>商品數量 </td> <td>amount </td> <td>簡答 </td> <td>文字 </td> <td style="text-align: center;">12 </td> <td style="text-align: center;">必填 </td> <td> </td> <td style="text-align: center;"> </td> <td style="text-align: center;">false </td> <td style="text-align: center;"> </td> <td style="text-align: center;"> </td> <td>例： +1|+2|+5 </td> <td> </td> <td style="text-align: center;">true </td> <td style="text-align: center;">left </td> <td style="text-align: center;">false </td> <td> </td> </tr> <tr data-index="8" data-uniqueid="85" id="tr_85"> <td style="text-align: center;">9 </td> <td>商品圖片 </td> <td>pic </td> <td>簡答 </td> <td>文字 </td> <td style="text-align: center;">12 </td> <td style="text-align: center;">必填 </td> <td> </td> <td style="text-align: center;"> </td> <td style="text-align: center;">false </td> <td style="text-align: center;"> </td> <td style="text-align: center;"> </td> <td>請將圖片上傳至 https://i.imgur.com/ </td> <td> </td> <td style="text-align: center;">false </td> <td style="text-align: center;">left </td> <td style="text-align: center;">false </td> </tr> <tr> <td style="text-align: center;">10 </td> <td>商品資訊 </td> <td>info </td> <td>網頁編輯器 </td> <td>文字 </td> <td style="text-align: center;">12 </td> <td style="text-align: center;"> </td> <td> </td> <td style="text-align: center;"> </td> <td style="text-align: center;"> </td> <td style="text-align: center;"> </td> <td style="text-align: center;"> </td> <td> </td> <td> </td> <td style="text-align: center;">false </td> <td style="text-align: center;">left </td> <td style="text-align: center;">false </td> </tr> </tbody> </table>
 2. 表單順序：由小至大
 3. 表單標題：請不要重覆，若有異動，請執行「程式碼.gs / setup」，標題會重新寫入，因此「欄位控制 ：true」的欄位，需要手動調整資料部份
 4. form\_name：請不要重覆，使用英文命名。單一工作表 第1欄位：sn。主+明細檔 工作表：明細檔 第1欄位 sn ，第2欄位 ofsn
 5. 表單類型：簡答、段落、下拉選單、複選、單選、日期、時間、日期時間、網頁編輯器、隱藏 
 網頁編輯器：請勿讓訪客使用
 6. 資料型別：「 | 文字」，若是數字請選空白
 7. 表單寬度：「1 ~ 12 」
 8. 表單驗證：「必填、email、網址、數字」，可複選
 9. 表單功能：時間戳記：程式會自行設定 日期+時間。email：代表此欄位會寄信
 10. 表單預設值
 11. 欄位控制：欄位控制 true，因此該欄位會出現在試算表上，請儘量將該類型欄位往前排放，其他 false的欄位，會出現在 CODE 欄位裡面 
 12. 表單唯讀
 13. 表單選項：單選、複選、下拉選單的項目
 14. 表單說明
 15. 表單暫留字
 16. 列表顯示
 17. 列表對齊
 18. 列表排序
 19. 列表寬度：(單位：px)
 
 <style>
 .videobox {
 position: relative;
 width: 100%;
 height: 0;
 padding-bottom: 56.25%;
 }

.videobox iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 }
 </style><div class="container pt-50 pb-50"></div>**Youtube影片：**<https://youtu.be/WxjHkeVLIRI>

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown