擴展 · PHP筆記

>[danger]注意標記移除部分很多在新版改為系統內置功能 [TOC] # **擴展** ## [Accent Neutralise](https://bootstrap-table.com/docs/extensions/accent-neutralise/)?（表的強調中合移除）需要加載： ~~~html <script src="extensions/accent-neutralise/bootstrap-table-accent-neutralise.js"></script> ~~~ 重讀詞搜索a->á 這種北歐語系如搜索Jose? 結果José 、jose 都會被搜索出來 ## [Addrbar](https://bootstrap-table.com/docs/extensions/addrbar/) 需要加載： ~~~html <script src="extensions/addrbar/bootstrap-table-addrbar.js"></script> ~~~ 每次更改頁面，排序和搜索操作時，都會更改地址欄的查詢參數。在頁面加載時，此插件將使用地址欄中的查詢參數來發出請求。 template.html?v=56&url=extensions/addrbar-page.html&page=1&limit=10&order=asc&sort=id&search= 搜索框中搜索衣服則URL地址變為 template.html?v=56&url=extensions/addrbar-page.html&page=1&limit=10&order=asc&sort=id&search=衣服 ## [Auto Refresh](https://bootstrap-table.com/docs/extensions/auto-refresh/) 表自動刷新需要加載： ~~~html <script src="extensions/auto-refresh/bootstrap-table-auto-refresh.js"></script> ~~~ ## [Cookie](https://bootstrap-table.com/docs/extensions/cookie/)保存表的狀態的Cookie擴展。一般用來保存表的狀態（其分頁位置，排序狀態，每頁記錄等）需要加載： ~~~html <script src="extensions/cookie/bootstrap-table-cookie.js"></script> ~~~ ## [Copy Rows](https://bootstrap-table.com/docs/extensions/copy-rows/) 將所選行復制到剪貼板此擴展添加了將所選行復制到剪貼板的功能。目前適用于除Safari之外的所有桌面瀏覽器需加載： ~~~html <script src="extensions/copy-rows/bootstrap-table-copy-rows.js"></script> ~~~ ## [Custom View](https://bootstrap-table.com/docs/extensions/custom-view/) 自定義視圖（新增）這個擴展增加了創建自定義視圖來顯示數據的能力 ~~~html <script src="extensions/custom-view/bootstrap-table-custom-view.js"></script> ~~~ ## [defer url](https://bootstrap-table.com/docs/extensions/defer-url/) 延遲url 使用服務器端處理時，bootstrap-table的默認操作模式是簡單地丟棄表中當前存在的任何數據，并向服務器發出請求以獲取要顯示的第一頁數據。這適用于空表，但如果您已經在純HTML中顯示了第一頁數據，則會浪費資源。因此，您可以使用data-defer-url而不是data-url來指示bootstrap-table不發出初始請求，而是使用頁面上已有的數據 ~~~html <script src="extensions/defer-url/bootstrap-table-defer-url.js"></script> ~~~ ## [Editable](https://bootstrap-table.com/docs/extensions/editable/) 表的可編輯 ~~~html <script src="extensions/editable/bootstrap-table-editable.js"></script> ~~~ ## [Export](https://bootstrap-table.com/docs/extensions/export/) 表格導出表格導出??[tableExport.jquery.plugin](https://github.com/hhurz/tableExport.jquery.plugin)插件 ~~~html <script src="extensions/export/bootstrap-table-export.js"></script> ~~~ ## [Filter Control](https://bootstrap-table.com/docs/extensions/filter-control/) 表過濾器控制? 表過濾器控制??如果使用datepicker選項，則依賴：bootstrap-datepicker v1.4.0 ~~~html <link rel="stylesheet" type="text/css" href="extensions/filter-control/bootstrap-table-filter-control.css"> <script src="extensions/filter-control/bootstrap-table-filter-control.js"></script> ~~~ ## [Fixed Columns](https://bootstrap-table.com/docs/extensions/fixed-columns/) 表的固定列 ~~~html <link rel="stylesheet" src="extensions/fixed-columns/bootstrap-table-fixed-columns.css"> <script src="extensions/fixed-columns/bootstrap-table-fixed-columns.js"></script> ~~~ ## [Group By v1](https://bootstrap-table.com/docs/extensions/group-by/)(表格分組 v1 移除) 依賴：jquery-treetable v3.2.0 ；您必須包含bootstrap-table-group-by.css文件才能獲得合適的樣式 ~~~html <script src="extensions/group-by/bootstrap-table-group-by.js"></script> ~~~ ## [Group By v2](https://bootstrap-table.com/docs/extensions/group-by-v2/) 表格分組 v2 表格分組v2：您必須包含bootstrap-table-group-by.css文件才能獲得適當的樣式 ~~~html <link rel="stylesheet" href="extensions/group-by-v2/bootstrap-table-group-by.css"> <script src="extensions/group-by-v2/bootstrap-table-group-by.js"></script> ~~~ ## [i18n Enhance](https://bootstrap-table.com/docs/extensions/i18n-enhance/) 地區語言 ~~~html <script src="extensions/select2-filter/bootstrap-table-i18n-enhance.js"></script> ~~~ 新版 ~~~html <script src="extensions/i18n-enhance/bootstrap-table-i18n-enhance.js"></script> ~~~ ## [Key Events](https://bootstrap-table.com/docs/extensions/key-events/) 啟用關鍵事件如果為True，則啟用關鍵事件。關鍵事件列表是：\* s：如果啟用了搜索文本框，它將聚焦于搜索文本框。 \* r：如果啟用showRefresh選項，它將刷新表。 \* t：如果啟用了showToggle選項，它將切換表視圖。 \* p：如果啟用了showPaginationSwitch，它將觸發分頁開關。 \* left：如果分頁是真的，它將轉到prev page。 \*右：如果分頁是真的，它將轉到下一頁 ~~~html <script src="extensions/key-events/bootstrap-table-key-events.js"></script> ~~~ ## [Mobile](https://bootstrap-table.com/docs/extensions/mobile/) 表格移動設備顯示增強 ~~~html <script src="extensions/mobile/bootstrap-table-mobile.js"></script> ~~~ ## [Multi Column Toggle](https://bootstrap-table.com/docs/extensions/multi-column-toggle/)(向工具欄添加一個按鈕已移除) 向工具欄添加一個按鈕，該按鈕隱藏并顯示所有可“切換”的列。 ~~~html <script src="extensions/multi-column-toggle/bootstrap-table-multi-toggle.js"></script> ~~~ ## [Multiple Search](https://bootstrap-table.com/docs/extensions/multiple-search/)表格分詞搜索(已移除) 表格分詞搜索如用戶輸入526 table? 將這個劇分隔并檢索出該表所有列中出現這526或者table的位置 ~~~html <script src="extensions/multiple-search/bootstrap-table-multiple-search.js"></script> ~~~ ## [Multiple Selection Row](https://bootstrap-table.com/docs/extensions/multiple-selection-row/)選中表格的多行（已移除）選中表格的多行 ~~~html <link rel="stylesheet" type="text/css" href="extensions/multiple-selection-row/bootstrap-table-multiple-selection-row.css"> <script src="extensions/multiple-selection-row/bootstrap-table-multiple-selection-row.js"></script> ~~~ ## [Multiple Sort](https://bootstrap-table.com/docs/extensions/multiple-sort/) 多重排序多重排序、表中可出現多個排序 ~~~html <script src="extensions/multiple-sort/bootstrap-table-multiple-sort.js"></script> ~~~ [Natural Sorting](https://bootstrap-table.com/docs/extensions/natural-sorting/)表格自然排序：（移除？） ~~~html <script src="extensions/natural-sorting/bootstrap-table-natural-sorting.js"></script>為任何th添加數據排序屬性。例如<thdata-sortable="true"data-sorter="alphanum">Price</th> ~~~ 選項 alphanum 自然地排序alpha或數字內容。這可以在包含文本或數字內容的列中使用。數字將按預期排序，而不是按ASCII順序排序 numericOnly 提取數字內容并按數字排序。這可以在包含格式化數字內容的列中使用。例如 $和將被刪除，然后Numbers將按預期排序一個alpha排序將這些作為ASCII排序，所以你得到$ 1，$ 100，$ 2，$ 20而不是$ 1，$ 2，$ 20，$ 100。 ## [Page Jump To](https://bootstrap-table.com/docs/extensions/page-jump-to/) 頁面跳轉 ~~~html <link rel="stylesheet" href="extensions/page-jumpto/bootstrap-table-jumpto.css"> <script src="extensions/page-jumpto/bootstrap-table-jumpto.js"></script> ~~~ 新版 ~~~html <link rel="stylesheet" href="extensions/page-jump-to/bootstrap-table-jump-to.css"> <script src="extensions/page-jump-to/bootstrap-table-jump-to.js"></script> ~~~ 選項屬性：showJumpto 類型：Boolean 設置為true以啟用顯示'jump to page'的按鈕？。可以通過data-show-jumpto HTML屬性定義。默認值：false 按鈕樣式：可以通過bootstrap-table buttonsClass屬性設置樣式。 ## [Table Pipeline](https://bootstrap-table.com/docs/extensions/pipeline/) 為服務器側請求啟用客戶端數據緩存（新增） ~~~html <script src="extensions/pipeline/bootstrap-table-pipeline.js"></script> ~~~ [例子：管道](https://examples.bootstrap-table.com/#extensions/pipeline.html)     這個插件為服務器端請求提供了客戶端數據緩存，這將消除每次頁面更改都發出新請求的需要。這將允許在一次返回所有數據(客戶端分頁)和新的服務器端請求(服務器端分頁)之間實現性能平衡。有兩個新的選項： * usePipeline：啟用此功能 * pipelineSize：每個緩存窗口的大小     管道的大小必須能被當前頁面大小整除。這可以通過舍入到最接近的可整除值來保證。例如，如果管道大小為4990，而當前頁面大小為25，那么管道大小將被動態設置為5000     存窗口是根據管道大小和服務器端查詢返回的總行數計算的。例如，如果管道大小為500，總行數為1300，那么緩存窗口將是: \[{‘lower’: 0, ‘upper’: 499}, {‘lower’: 500, ‘upper’: 999}, {‘lower’: 1000, ‘upper’: 1499}\]     使用limit(即pipelineSize)和offset參數，服務器端請求必須只返回請求緩存窗口中的數據和總行數。也就是說，服務器端代碼必須使用偏移量和限制參數來準備響應數據     在頁面更改時，如果新偏移量在當前緩存窗口內，則檢查它。如果是，則從緩存的數據集返回請求的頁面數據。否則，將向新緩存窗口發出新的服務器端請求當前緩存數據僅在這些事件上失效： * 排序 * 搜索 * 頁面大小更改 * 頁面更改移動到新的緩存窗口有兩個新事件： * cached-data-hit.bs.table：當在頁面更改中使用緩存數據時發出 * cached-data-reset.bs.table：當緩存的數據無效并發出新的服務器端請求時發出 **選項** pipelineSize * 類型： Number * 描述：每個緩存窗口的大小。必須大于 0。 * 默認：`1000` usePipeline * 類型： Boolean * 描述：設置true則啟用管道 * 默認：`false` **事件** onCachedDataHit(cached-data-hit.bs.table) * 當分頁能夠使用本地緩存的數據時觸發。 onCachedDataReset(cached-data-reset.bs.table) * 當本地緩存的數據需要重置(如排序，搜索，頁面大小改變或分頁出當前緩存窗口)時觸發 ## [Print](https://bootstrap-table.com/docs/extensions/print/) 打印在工具欄中添加一個按鈕，以預定義的可配置格式打印表格 ~~~html <script src="extensions/print/bootstrap-table-print.js"></script> ~~~ ## [Reorder Columns](https://bootstrap-table.com/docs/extensions/reorder-columns/) 表的列重新排序（即可移動的列功能）表個列重新排序（即可移動的列插件）依賴性：dragTable v2.0.14（必須包含css文件），jquery-ui v1.11 ~~~html <link rel="stylesheet" href=".../dragtable.css"> <link rel="stylesheet" href="dragtable.css"> <script src=".../jquery-ui.js"></script> <script src=".../jquery.dragtable.js"></script> <script src="extensions/reorder-columns/bootstrap-table-reorder-columns.js"></script> ~~~ 新版 ~~~html <link rel="stylesheet" href="dragtable.css"> <script src="jquery-ui.js"></script> <script src="jquery.dragtable.js"></script> <script src="extensions/reorder-columns/bootstrap-table-reorder-columns.js"></script> ~~~ ## [Reorder Rows](https://bootstrap-table.com/docs/extensions/reorder-rows/) 表個行重新排序表個行重新排序（即可移動的列插件）依賴：tablednd v0.9，如果你想要你可以包含bootstrap-table-reorder-rows.css文件來使用默認的dragClass ~~~html <link rel="stylesheet" href=".../bootstrap-table-reorder-rows.css"> <script src=".../jquery.tablednd.js"></script> <script src="extensions/reorder-rows/bootstrap-table-reorder-rows.js"></script> ~~~ 新版 ~~~html <link rel="stylesheet" href="extensions/reorder-rows/bootstrap-table-reorder-rows.css"> <script src=".../jquery.tablednd.js"></script> <script src="extensions/reorder-rows/bootstrap-table-reorder-rows.js"></script> ~~~ ## [Resizable](https://bootstrap-table.com/docs/extensions/resizable/) 可調整表的列大小已知的問題設置data-height時，此插件不起作用。依賴：jquery-resizable-columns v0.2.3 ~~~html <script src="extensions/resizable/bootstrap-table-resizable.js"></script> ~~~ ## [Select2 Filter](https://bootstrap-table.com/docs/extensions/select2-filter/) 表格select2過濾器（已移除）如果使用select2選項，則依賴：Select2 v4.0.0 upper ~~~html <script src="extensions/select2-filter/bootstrap-table-select2-filter.js"></script> ~~~ ## [Sticky Header](https://bootstrap-table.com/docs/extensions/sticky-header/) 粘貼性標題(固定表頭) 表引導表的Sticky Header擴展。這是一個擴展，在滾動時為表提供粘性標題。(固定表頭) ~~~html <script src="extensions/sticky-header/bootstrap-table-sticky-header.js"></script> ~~~ 新版 ~~~html <link rel="stylesheet" href="extensions/sticky-header/bootstrap-table-sticky-header.css"> <script src="extensions/sticky-header/bootstrap-table-sticky-header.js"></script> ~~~ ## [Toolbar](https://bootstrap-table.com/docs/extensions/toolbar/) 表格工具欄表格工具欄擴展;比如啟用高級搜索 ~~~html <script src="extensions/toolbar/bootstrap-table-toolbar.js"></script> ~~~ ## [Treegrid](https://bootstrap-table.com/docs/extensions/treegrid/) 表格的樹形網格依賴:jquery-treegrid v0.3.0 ~~~html <script src="extensions/treegrid/bootstrap-table-treegrid.js"></script> ~~~ 示例：[treegrid](https://live.bootstrap-table.com/example/extensions/treegrid.html) ``` <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-treegrid@0.3.0/css/jquery.treegrid.css"> <script src="https://cdn.jsdelivr.net/npm/jquery-treegrid@0.3.0/js/jquery.treegrid.min.js"></script> <table id="table"></table> <script> var $table = $('#table') $(function() { $table.bootstrapTable({ url: 'json/treegrid.json', idField: 'id', showColumns: true, columns: [ { field: 'ck', checkbox: true }, { field: 'name', title: '名稱' }, { field: 'status', title: '狀態', sortable: true, align: 'center', formatter: 'statusFormatter' }, { field: 'permissionValue', title: '權限值' } ], treeShowField: 'name', parentIdField: 'pid', onPostBody: function() { var columns = $table.bootstrapTable('getOptions').columns if (columns && columns[0][1].visible) { $table.treegrid({ treeColumn: 1, onChange: function() { $table.bootstrapTable('resetView') } }) } } }) }) function typeFormatter(value, row, index) { if (value === 'menu') { return '菜單' } if (value === 'button') { return '按鈕' } if (value === 'api') { return '接口' } return '-' } function statusFormatter(value, row, index) { if (value === 1) { return '<span class="label label-success">正常</span>' } return '<span class="label label-default">鎖定</span>' } </script> ``` treegrid.json ~~~ [ { "id": 1, "pid": 0, "status": 1, "name": "系統管理", "permissionValue": "open:system:get" }, { "id": 2, "pid": 0, "status": 1, "name": "字典管理", "permissionValue": "open:dict:get" }, { "id": 20, "pid": 1, "status": 1, "name": "新增系統", "permissionValue": "open:system:add" }, { "id": 21, "pid": 1, "status": 1, "name": "編輯系統", "permissionValue": "open:system:edit" }, { "id": 22, "pid": 1, "status": 1, "name": "刪除系統", "permissionValue": "open:system:delete" }, { "id": 33, "pid": 2, "status": 1, "name": "系統環境", "permissionValue": "open:env:get" }, { "id": 333, "pid": 33, "status": 1, "name": "新增環境", "permissionValue": "open:env:add" }, { "id": 3333, "pid": 33, "status": 1, "name": "編輯環境", "permissionValue": "open:env:edit" }, { "id": 233332, "pid": 33, "status": 0, "name": "刪除環境", "permissionValue": "open:env:delete" } ] ~~~ ![](https://img.kancloud.cn/8c/c6/8cc6cffda897f1dd1e8caa9b0357d70b_866x568.png)