Title1

Title2

Title3

prev10. 全域變數&權限
12. Bootstrap Table(二)next
鐵人賽-Google Apps Script整合運用

11. Bootstrap Table(一)

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>

     

  3. 啟始模版 
    <!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
    建立路由 
    
    // 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);   
}

     

  5. 在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>

     

  2. 將標題替換、資料替換一筆 
    <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) 
    
/*========================================
  客戶資料 查詢
=========================================*/
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); 
}

     

  4. 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>

     

 

prev10. 全域變數&權限
12. Bootstrap Table(二)next

友善列印 & 下載 PDF 匯出 MarkDown 格式