Bootstrap Table使用整理（四）之工具栏

Bootstrap Table之工具栏详解（四）

======================

引言

--

一、启用默认支持的工具栏

--

Bootstrap Table支持多种工具栏功能，包括搜索、刷新、切换面板和列控制等。通过在table标签中设置相应的属性，可以轻松启用这些功能。例如：

```html

data-classes="table table-hover"

data-search="true"

data-show-refresh="true"

data-show-toggle="true"

data-show-columns="true">

```

```javascript

$('table1').bootstrapTable({

url: '@Url.Action("GetStudent","DataOne")', //数据接口

//其他配置...

});

```

二、扩展工具栏使用

除了默认的工具栏功能外，Bootstrap Table还提供了扩展工具栏的功能。你可以通过`data-toolbar`属性指定一个div作为工具栏，这个工具栏可以包含任何你想要的内容。你也可以通过`queryParams`函数在请求服务器数据时添加额外的参数。例如：

```javascript

var $table1 = $('table1').bootstrapTable({

url: '@Url.Action("GetStudent","DataOne")', //数据接口

queryParams: function (params) {

params.name = '张三丰'; //添加额外的查询参数

params.sex = $('input[name="sex"]:checked').val(); //根据表单动态设置查询参数

return params; //返回参数列表，用于向服务器发送请求

}

});

```

刷新方法示例：

```javascript

$('heartBtn').click(function () {

//指定query的参数进行刷新，这些参数仅在本次刷新中使用

$table1.bootstrapTable('refresh', { query: { name: '张三' } });

});

```

--

Bootstrap Table的工具栏功能为开发者提供了丰富的操作选项和灵活的定制能力。希望大家能够深入了解并熟练应用Bootstrap Table的工具栏功能，为项目增添更多交互性和实用性。如果你有任何疑问或需要进一步的学习资料，欢迎参考Bootstrap Table的官方文档和相关教程。