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

鐵人賽-Google Apps Script整合運用
==========================

調用Bootstrap-table
-----------------

1. 上個單元，是使用它的啟始模版，在 table 設定 「data-toggle="table"」屬性，即可調用
2. 本單元則是從 js來調用 $("#table").bootstrapTable({})
3. 首先在 table 設定 id='table'
4. th屬性 
  ```javascript
  
    <thead>
      <tr>
        <? for(let i in stru){ ?>
          <th
            data-field='<?= stru[i]['title']?>'
            data-sortable='true'
            data-align='left'
            data-width=''
            data-visible='true'        
          >
            <?= stru[i]['title']?>
          </th>
        <? } ?>
        
        <th 
          data-field='operate' 
          data-sortable='false' 
          data-align='center' 
          data-width='150'
          data-clickToSelect='false' 
          data-events='window.operateEvents' 
          data-formatter='operateFormatter'>
          <a href="<?= global['url'] ?>?op=form_custom" class="" title='新增'>
            <i class="bi bi-file-earmark-plus"></i>
          </a>
        </th>
      </tr>
    </thead>
  ```
  
  函式屬性，可以放在 html中，例 data-field 如果放在 js 則用 field  
   data-field：欄位名稱  
   data-sortable：是否排序 true false  
   data-align：水平對齊 left center right  
   data-width：欄位寬度，單位 px  
   data-visible：欄位是否出現  
   data-events：按鈕事件，調用的 windows.xxx =>必在 放在「$("#table").bootstrapTable({})」前面  
   data-formatter：按鈕
  
   
  ```javascript
  
    window.operateEvents = {
      'click .show': function (e, value, row, index) {//顯示單筆
        alert('查詢');//         
      },
      'click .edit': function (e, value, row, index) {
        top.location.href='<?= global.url ?>?op=form_custom&&sn='+row[0]
      },
      'click .delete': function (e, value, row, index) {
        alert('刪除');      
      }
    } 
  
    function operateFormatter(value, row, index) {
      console.log(row)
      return [
        '<a class="show me-2" href="javascript:void(0)" title="查詢" target="_self">',
        '<i class="bi bi-search"></i>',
        '</a>',
        '<a class="edit me-2" href="javascript:void(0)" title="編輯" target="_self">',
        '<i class="bi bi-pencil-square"></i>',
        '</a>',
        '<a class="delete me-2 text-danger" href="javascript:void(0)" title="刪除" target="_self">',
        '<i class="bi bi-file-earmark-x"></i>',
        '</a>'
      ].join('')
    }
  ```
5. 調用 
  ```javascript
  
    $(function(){
      // 參數設定：https://examples.bootstrap-table.com/#options/table-ajax.html
      $("#table").bootstrapTable({
        classes: 'table table-sm table-striped table-bordered table-hover',   //表格樣式 table table-sm table-striped table-bordered table-hover
        toolbar: '#toolbar',                                                  //工具按鈕用哪個容器
        cache: false,                                                         //是否使用快取，預設為 true，所以一般情況下需要設定一下這個屬性（*）
        uniqueId:'',                                                          //哪一個欄位是key
        sortName:'',                                                          //依照那個欄位排序
        // height : 450,                                                        //高度 
        sortable: false,                                                      //是否啟用排序
        sortOrder:'',                                                         //asc
        sidePagination: "client",                                             //分頁方式：client 使用者端分頁，server 伺服器端分頁（*）
        theadClasses: 'table-light',                                          //標題列樣式
        
        //可於ToolBar上顯示的按鈕
        buttonsClass: "primary",                                              //
        buttonsAlign: "left",                                                //left right
        showColumns : true,                                                   //顯示/隱藏哪些欄位
        showToggle : true,                                                    //名片式/table式切換
        showRefresh : false,                                                  //重新整理
        showPaginationSwitch : true,                                          //分頁/不分頁切換
        showFullscreen: true,                                                 //顯示全螢幕
        search : true,                                                        //查詢
        buttons : '',                                                         //返回主檔按鈕 
        // cardView: true,                                                    //是否顯示詳細檢視
        // detailView: true,                                                  //是否顯示父子表
  
        showExport: true,                                                     //是否顯示匯出
        exportDataType: 'basic',								                              //匯出資料型別，支援：'基本'，'全部'，'選中'
        exportTypes:['json', 'csv', 'excel', 'xlsx', 'png'],                         //匯出型別
  
        pagination : true,                                                     //使否要分頁
        pageNumber:1,                                                          //初始化載入第一頁，預設第一頁
        onPageChange:function(currentPage, pageSize) {
          //console.log("目前頁數: "+currentPage+" ,一頁顯示: "+pageSize+" 筆");        
        },
        pageSize : 20,                                                         //一頁顯示幾筆
        pageList : "[ 20, 50, 100, all]",                                      //一頁顯示幾筆的選項
        formatRecordsPerPage:function(pageSize) {
          return '  每頁顯示 ' + pageSize + ' 筆';
        },
        formatShowingRows:function(fromIndex, toIndex, totalSize) {
          //目前第幾頁
          var currentPage = Math.ceil(fromIndex / this.pageSize);
          //總共幾頁
          var totalPageCount = Math.ceil(totalSize / this.pageSize);
          return currentPage+' / '+totalPageCount;
        }
  
      });
    })
  ```
6. 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>
  
  
  
  <script src="https://unpkg.com/bootstrap-table@1.22.1/dist/extensions/export/bootstrap-table-export.min.js"></script>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.21.15/plugins/export/libs/FileSaver.js/FileSaver.min.js"></script>
  
  <script src="	https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.15.6/xlsx.core.min.js"></script>
  
  
  <script src="https://cdn.bootcss.com/es6-promise/4.1.1/es6-promise.auto.min.js"></script>
  <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
  
  <script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
  
  
  <div id="toolbar"></div>
  <table id="table">
    <thead>
      <tr>
        <? for(let i in stru){ ?>
          <th
            data-field='<?= stru[i]['title']?>'
            data-sortable='true'
            data-align='left'
            data-width=''
            data-visible='true'        
          >
            <?= stru[i]['title']?>
          </th>
        <? } ?>
        
        <th 
          data-field='operate' 
          data-sortable='false' 
          data-align='center' 
          data-width='150'
          data-clickToSelect='false' 
          data-events='window.operateEvents' 
          data-formatter='operateFormatter'>
          <a href="<?= global['url'] ?>?op=form_custom" class="" title='新增'>
            <i class="bi bi-file-earmark-plus"></i>
          </a>
        </th>
      </tr>
    </thead>
    <tbody>
      
      <? for(let i in rows){ ?>
        <tr>
          <? for(let j in rows[i]){?>
            <td><?= rows[i][j] ?></td>
          <? } ?>
          <td></td>
        </tr>
      <? } ?>
    </tbody>
  </table>
  
  <script>
    
    window.operateEvents = {
      'click .show': function (e, value, row, index) {//顯示單筆
        alert('查詢');//         
      },
      'click .edit': function (e, value, row, index) {
        top.location.href='<?= global.url ?>?op=form_custom&&sn='+row[0]
      },
      'click .delete': function (e, value, row, index) {
        alert('刪除');      
      }
    } 
  
    function operateFormatter(value, row, index) {
      console.log(row)
      return [
        '<a class="show me-2" href="javascript:void(0)" title="查詢" target="_self">',
        '<i class="bi bi-search"></i>',
        '</a>',
        '<a class="edit me-2" href="javascript:void(0)" title="編輯" target="_self">',
        '<i class="bi bi-pencil-square"></i>',
        '</a>',
        '<a class="delete me-2 text-danger" href="javascript:void(0)" title="刪除" target="_self">',
        '<i class="bi bi-file-earmark-x"></i>',
        '</a>'
      ].join('')
    }
  
    $(function(){
      // 參數設定：https://examples.bootstrap-table.com/#options/table-ajax.html
      $("#table").bootstrapTable({
        classes: 'table table-sm table-striped table-bordered table-hover',   //表格樣式 table table-sm table-striped table-bordered table-hover
        toolbar: '#toolbar',                                                  //工具按鈕用哪個容器
        cache: false,                                                         //是否使用快取，預設為 true，所以一般情況下需要設定一下這個屬性（*）
        uniqueId:'',                                                          //哪一個欄位是key
        sortName:'',                                                          //依照那個欄位排序
        // height : 450,                                                        //高度 
        sortable: false,                                                      //是否啟用排序
        sortOrder:'',                                                         //asc
        sidePagination: "client",                                             //分頁方式：client 使用者端分頁，server 伺服器端分頁（*）
        theadClasses: 'table-light',                                          //標題列樣式
        
        //可於ToolBar上顯示的按鈕
        buttonsClass: "primary",                                              //
        buttonsAlign: "left",                                                //left right
        showColumns : true,                                                   //顯示/隱藏哪些欄位
        showToggle : true,                                                    //名片式/table式切換
        showRefresh : false,                                                  //重新整理
        showPaginationSwitch : true,                                          //分頁/不分頁切換
        showFullscreen: true,                                                 //顯示全螢幕
        search : true,                                                        //查詢
        buttons : '',                                                         //返回主檔按鈕 
        // cardView: true,                                                    //是否顯示詳細檢視
        // detailView: true,                                                  //是否顯示父子表
  
        showExport: true,                                                     //是否顯示匯出
        exportDataType: 'basic',								                              //匯出資料型別，支援：'基本'，'全部'，'選中'
        exportTypes:['json', 'csv', 'excel', 'xlsx', 'png'],                         //匯出型別
  
        pagination : true,                                                     //使否要分頁
        pageNumber:1,                                                          //初始化載入第一頁，預設第一頁
        onPageChange:function(currentPage, pageSize) {
          //console.log("目前頁數: "+currentPage+" ,一頁顯示: "+pageSize+" 筆");        
        },
        pageSize : 20,                                                         //一頁顯示幾筆
        pageList : "[ 20, 50, 100, all]",                                      //一頁顯示幾筆的選項
        formatRecordsPerPage:function(pageSize) {
          return '  每頁顯示 ' + pageSize + ' 筆';
        },
        formatShowingRows:function(fromIndex, toIndex, totalSize) {
          //目前第幾頁
          var currentPage = Math.ceil(fromIndex / this.pageSize);
          //總共幾頁
          var totalPageCount = Math.ceil(totalSize / this.pageSize);
          return currentPage+' / '+totalPageCount;
        }
  
      });
    })
  </script>
  ```

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown