iT邦幫忙

2023 iThome 鐵人賽
DAY 11
0
Modern Web

Google Apps Script 整合運用系列 第 11 篇

Bootstrap Table(一)

15th鐵人賽
625 瀏覽

  • 分享至 

  • xImage
    •  

Bootstrap Table

  1. 官網：https://bootstrap-table.com/
  2. 它是基於JQUERY開發的套件，因此調用之前須執行「jquery.js」。因為我們在主樣版已經引入，故可以略過
  3. 它有使用「bootstrap icon」，主樣版已經引入，故可以略過

安裝

  1. GAS無法上傳檔案，故一律使用CDN
  2. 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>
  1. 啟始模版
<!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>
  1. 請將上面樣版建立 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);   
}
  1. 在menu.html 增加一個選單

              <li><a class="dropdown-item" href="<?= global.url ?>?op=bt" target="_blank">Bootstrap-table</a></li>

客戶管理

  1. 從 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>
  1. 將標題替換、資料替換一筆
<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>
  1. 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); 
}

將變數傳遞至前台樣版

  1. 利用 樣版.屬性
  2. 在樣版跑迴圈
  3. 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); 
}
  1. 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>

上一篇
全域變數&權限
下一篇
Bootstrap Table(二)
系列文
Google Apps Script 整合運用 共 30 篇
  1. 26
    Google日曆通知
  2. 27
    日期套件
  3. 28
    網頁編輯器
  4. 29
    寄信功能
  5. 30
    除錯畫面
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22211 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙