鐵人賽-Google Apps Script整合運用
Bootstrap Table
- 官網：https://bootstrap-table.com/
- 它是基於JQUERY開發的套件，因此調用之前須執行「jquery.js」。因為我們在主樣版已經引入，故可以略過
- 它有使用「bootstrap icon」，主樣版已經引入，故可以略過
- GAS無法上傳檔案，故一律使用CDN
- CDN
<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>
- 啟始模版
<!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>
- 請將上面樣版建立 bt.html
建立路由 // bootstrap-table Route.path("bt", bt);
prog_api.gs => bt(e) function bt(e) { let title = 'Bootstrap-table'; let content = ''; content = `<h2 class='mt-3'>${title}</h2>`; return render('bt', {content: content}, title); } - 在menu.html 增加一個選單
<li><a class="dropdown-item" href="<?= global.url ?>?op=bt" target="_blank">Bootstrap-table</a></li>
- 從 bt.html 把表格複製過去 custom.html
引入bootstrap-table套件即可 <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> - 將標題替換、資料替換一筆
<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>
- prog_custom.gs => custom(e)
/*========================================
客戶資料 查詢
=========================================*/
function custom(e){
let title = '客戶管理';
let content = '';
content = `<h2 class='mt-3'>${title}</h2>`;
// 調用 custom 子樣版
content += render('custom', {});
return render('tmp', {content: content}, title);
}
- 利用 樣版.屬性
- 在樣版跑迴圈
- custom(e)
/*========================================
客戶資料 查詢
=========================================*/
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);
}
- custom.html
<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>