扩展 · 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)