Title1
Title2
Title3
Login
Link
Search
教學頻道
中信金融管理學院
點二下資訊社
新化社區大學
GAS+購物車開發
GAS專案
GAS+購物車開發
Google表單實戰電商購物車
GAS+LineBot開發
外帶內用管理
購物車管理
線上打卡系統管理
萬用表單5
LineBot 線上書籍
PHP專案
網站程式設計-PHP(10502)
網站程式設計-PHP
PHP SMARTY 樣板引擎
SMARTY樣板
課程教材
雲端工具入門
行動應用企劃人員養成班
萬用表單5
GAS+LineBot開發
研習
萬用表單5
鐵人賽-Google Apps Script整合運用
GAS+LineBot開發
樂齡3C學習不斷電
臺東專科學校
GAS 開發 LineBot 自動接單系統
德鍵
112行動應用企劃人員養成班
111網頁前端設計工程師培訓班
110網頁前端設計工程師培訓班
網頁前端設計工程師培訓班
old
網頁前端設計與開發運用培訓班
Javascript & JQUERY
免費釋出專案
萬用表單
自動資料查詢
台南社大
113-01-雲端工具入門
112-02-AI自動管理
112-01-用QRCODE打造自動化環境
110-01-用雲端打造自動化環境
用雲端打造自動化環境
Google雲端智慧王
讓雲端工具提昇工作效率
Google 速學工作術
台南市總圖
教你如何使用LINE Bot機器人增加工作效率
Google雲端工具基礎應用
Google雲端工具進階應用
工作自動化與行銷(台南社大)
全部教材
台南市人力發展中心
Google工具應用實務班
企業課程
鐳達實業有限公司
GAS研習-20200726
中正大學-GAS研習
將軍圖書館
Google雲端工具基礎應用
Google雲端工具進階應用
南方創客
GitHub 衍伸應用
Google 應用工作術
永康社大
用雲端打造自動化環境(110-春季班)
用雲端打造自動化環境
南關社大
電腦、手機生活應用
遠端桌面
公司業務
傳送檔案
adwcleaner
W10 更新
客戶網站
最近完工
深雋設計有限公司
新化社大校務系統
靚品科技有限公司
5C Precision Co., Ltd.
BALANCE 1
RWD網站
東北關廟麵
曼馱有限公司
永宸昕有限公司
昌美實業社
形象網站
勇信機械有限公司
GAS專案
聯絡我們&案件委託
所有書籍
「鐵人賽-Google Apps Script整合運用」目錄
MarkDown
10. 全域變數&權限
1. Google Apps Script介紹
2. 在試算表儲存資料(一)
3. 在試算表儲存資料(二)
4. 在試算表儲存資料(三)
5. 專案授權&在試算表撈出資料
6. Web 服務&API 服務
7. GAS樣版引擎
8. 建立共用函式
9. 建立路由與請求
10. 全域變數&權限
11. Bootstrap Table(一)
12. Bootstrap Table(二)
13. 表單頁面(一)
14. 表單頁面(二)
15. 表單結構
12. Bootstrap Table(二)
鐵人賽-Google Apps Script整合運用 ========================== Bootstrap Table --------------- 1. 官網：<https://bootstrap-table.com/> 2. 它是基於JQUERY開發的套件，因此調用之前須執行「jquery.js」。因為我們在主樣版已經引入，故可以略過 3. 它有使用「bootstrap icon」，主樣版已經引入，故可以略過 安裝 -- 1. GAS無法上傳檔案，故一律使用CDN 2. CDN ```javascript <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.css"> <script src="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.js"></script> <script src="https://unpkg.com/bootstrap-table@1.22.1/dist/locale/bootstrap-table-zh-TW.min.js"></script> ``` 3. 啟始模版 ```javascript <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Hello, Bootstrap Table!</title> <!-- bootstrap --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <!-- bootstrap-icons --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css"> <!-- bootstrap-table --> <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.css"> <!-- jquery --> <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script> <!-- bootstrap --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <!-- bootstrap-table --> <script src="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.js"></script> <script src="https://unpkg.com/bootstrap-table@1.22.1/dist/locale/bootstrap-table-zh-TW.min.js"></script> </head> <body> <div class="container mt-5"> <table data-toggle="table"> <thead> <tr> <th>Item ID</th> <th>Item Name</th> <th>Item Price</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Item 1</td> <td>$1</td> </tr> <tr> <td>2</td> <td>Item 2</td> <td>$2</td> </tr> </tbody> </table> </div> </body> </html> ``` 4. 請將上面樣版建立 bt.html 建立路由 ```javascript // bootstrap-table Route.path("bt", bt); ``` prog\_api.gs => bt(e) ```javascript function bt(e) { let title = 'Bootstrap-table'; let content = ''; content = `<h2 class='mt-3'>${title}</h2>`; return render('bt', {content: content}, title); } ``` 5. 在menu.html 增加一個選單 ```javascript <li><a class="dropdown-item" href="<?= global.url ?>?op=bt" target="_blank">Bootstrap-table</a></li> ``` 客戶管理 ---- 1. 從 bt.html 把表格複製過去 custom.html 引入bootstrap-table套件即可 ```javascript <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.css"> <script src="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.js"></script> <script src="https://unpkg.com/bootstrap-table@1.22.1/dist/locale/bootstrap-table-zh-TW.min.js"></script> <table data-toggle="table"> <thead> <tr> <th>Item ID</th> <th>Item Name</th> <th>Item Price</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Item 1</td> <td>$1</td> </tr> <tr> <td>2</td> <td>Item 2</td> <td>$2</td> </tr> </tbody> </table> ``` 2. 將標題替換、資料替換一筆 ```javascript <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.css"> <script src="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.js"></script> <script src="https://unpkg.com/bootstrap-table@1.22.1/dist/locale/bootstrap-table-zh-TW.min.js"></script> <!-- 流水號 客戶名稱 客戶電話 客戶地址 備註 --> <table data-toggle="table"> <thead> <tr> <th>流水號</th> <th>客戶名稱</th> <th>客戶電話</th> <th>客戶地址</th> <th>備註</th> </tr> </thead> <tbody> <!-- 1 育將電腦 123456789 台南市永康區大灣路158號 備註1 --> <tr> <td>1</td> <td>育將電腦</td> <td>123456789</td> <td>台南市永康區大灣路158號</td> <td>備註1</td> </tr> </tbody> </table> ``` 3. prog\_custom.gs => custom(e) ```javascript /*======================================== 客戶資料 查詢 =========================================*/ function custom(e){ let title = '客戶管理'; let content = ''; content = `<h2 class='mt-3'>${title}</h2>`; // 調用 custom 子樣版 content += render('custom', {}); return render('tmp', {content: content}, title); } ``` 將變數傳遞至前台樣版 ---------- 1. 利用 樣版.屬性 2. 在樣版跑迴圈 3. custom(e) ```javascript /*======================================== 客戶資料 查詢 =========================================*/ function custom(e){ let title = '客戶管理'; let content = ''; content = `<h2 class='mt-3'>${title}</h2>`; // 調用 custom 子樣版 let stru = get_stru_custom(); let rows = get_data_custom(); content += render('custom', {stru: stru, rows: rows}); return render('tmp', {content: content}, title); } ``` 4. custom.html ```javascript <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.css"> <script src="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.js"></script> <script src="https://unpkg.com/bootstrap-table@1.22.1/dist/locale/bootstrap-table-zh-TW.min.js"></script> <!-- 流水號 客戶名稱 客戶電話 客戶地址 備註 --> <table data-toggle="table"> <thead> <tr> <? for(let i in stru){ ?> <th><?= stru[i]['title']?></th> <? } ?> </tr> </thead> <tbody> <!-- 1 育將電腦 123456789 台南市永康區大灣路158號 備註1 --> <? for(let i in rows){ ?> <tr> <? for(let j in rows[i]){?> <td><?= rows[i][j] ?></td> <? } ?> </tr> <? } ?> </tbody> </table> ``` </body></html>
10. 全域變數&權限