🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
>[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) &nbsp;&nbsp;&nbsp;&nbsp;这个插件为服务器端请求提供了客户端数据缓存,这将消除每次页面更改都发出新请求的需要。这将允许在一次返回所有数据(客户端分页)和新的服务器端请求(服务器端分页)之间实现性能平衡。 有两个新的选项: * usePipeline:启用此功能 * pipelineSize:每个缓存窗口的大小 &nbsp;&nbsp;&nbsp;&nbsp;管道的大小必须能被当前页面大小整除。这可以通过舍入到最接近的可整除值来保证。例如,如果管道大小为4990,而当前页面大小为25,那么管道大小将被动态设置为5000 &nbsp;&nbsp;&nbsp;&nbsp;存窗口是根据管道大小和服务器端查询返回的总行数计算的。例如,如果管道大小为500,总行数为1300,那么缓存窗口将是: \[{‘lower’: 0, ‘upper’: 499}, {‘lower’: 500, ‘upper’: 999}, {‘lower’: 1000, ‘upper’: 1499}\] &nbsp;&nbsp;&nbsp;&nbsp;使用limit(即pipelineSize)和offset参数,服务器端请求必须只返回请求缓存窗口中的数据和总行数。也就是说,服务器端代码必须使用偏移量和限制参数来准备响应数据 &nbsp;&nbsp;&nbsp;&nbsp;在页面更改时,如果新偏移量在当前缓存窗口内,则检查它。如果是,则从缓存的数据集返回请求的页面数据。否则,将向新缓存窗口发出新的服务器端请求 当前缓存数据仅在这些事件上失效: * 排序 * 搜索 * 页面大小更改 * 页面更改移动到新的缓存窗口 有两个新事件: * 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)