JS组件系列之Bootstrap table表格组件神器【终结篇】

一、效果展示

在展示一些特定数据时，行列合并是必不可少的。Bootstrap Table支持行列合并功能，方便我们在展示报表等场景时使用。

Bootstrap Table还提供了数据导出的功能。我们可以选择导出当前页数据、所有数据或选中数据，支持多种格式，如excel、xml、json等。这一功能方便我们快速整理、分享数据。

假设我们有一个订单状态为“已完成”的订单，我们希望将其背景色设置为绿色。我们可以使用以下代码实现：

```javascript

$('yourTable').bootstrapTable('getRowByField', 'orderStatus').forEach(function(row){ //获取订单状态字段所在行 if(row['orderStatus'] == '已完成'){ $(row).css('background-color', 'green'); } }); ```

```javascript

$('tb_order').bootstrapTable({

// 请求后台数据的URL

url: '/TableStyle/GetOrder',

// 请求方式，这里使用GET

method: 'get',

// 显示行间隔色

striped: true,

// 关闭缓存，确保数据实时性

cache: false,

// 开启分页功能

pagination: true,

sortable: false,

// 设置默认的排序方式为升序

sortOrder: "asc",

// 传递额外的查询参数

queryParams: oTableInit.queryParams,

// 分页方式，可以选择客户端分页或者服务端分页

sidePagination: "server",

// 初始化加载第一页

pageNumber: 1,

// 每页显示的记录数

pageSize: 10,

// 可供选择的每页的行数

pageList: [10, 25, 50, 100],

search: true,

strictSearch: true,

// 显示所有列的选择框（用于控制列的显示与隐藏）

showColumns: true,

// 显示刷新按钮，用于重新加载数据

showRefresh: true,

// 设置最少允许的列数为2（根据实际情况调整）

minimumCountColumns: 2,

// 启用点击行选中该行（常用于行的进一步操作）

clickToSelect: true,

假设我们已经有了一个基本的Bootstrap Table，接下来要对其进行扩展，以支持行内编辑。我们可以通过以下步骤来实现：

1. 引入必要的JS文件：确保你的项目中已经引入了Bootstrap和jQuery库。然后，引入Bootstrap Table的扩展JS文件，这些文件通常包含了行内编辑所需的函数和组件。

4. 样式和交互：为了提高用户体验，你可以为编辑框添加适当的样式，并在用户输入时进行实时验证和反馈。例如，可以使用Bootstrap的表单控件和样式来美化编辑框。

5. 保存和更新数据：当用户完成编辑并确认时，你需要将修改后的数据发送到服务器进行保存和更新。这通常涉及到Ajax技术，你可以使用jQuery的Ajax方法来实现这一功能。

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

确保您的页面引入了必要的JS文件和样式表。以下是引入方式：

```html

```

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

```html

部门名称	上级部门	部门级别	描述

```

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

```javascript

$('tb_departments').bootstrapTable({

url: '/Editable/GetDepartment', //请求后台数据的URL

method: 'get', //请求方式

toolbar: 'toolbar', //工具按钮容器选择

striped: true, //显示行间隔色

cache: false, //禁用缓存，因为通常我们需要实时数据更新

pagination: true, //开启分页功能

sortable: false, //禁用排序功能（可根据需求设置）

sortOrder: "asc", //设置排序方式（按需调整）

queryParams: oTableInit.queryParams, //传递查询参数到后台（按需设置）

sidePagination: "server", //分页方式（客户端分页或服务端分页）

pageNumber: 1, //初始化加载第一页数据，默认第一页显示数据

pageSize: 10, //每页显示的记录数（按需调整）

```html

合并列标题
合并行的数据

```

HTML代码展示如下：

```html

```

季度概览报告表

2、js初始化展示

```javascript

$('tb_report').bootstrapTable({

// 请求后台数据的URL地址

url: '/GroupColumns/GetReport',

// 请求方式为get

method: 'get',

// 工具按钮容器选择

toolbar: 'toolbar',

// 显示行间隔色

striped: true,

// 关闭缓存，以便实时获取数据

cache: false,

// 显示分页功能

pagination: true,

// 设置排序方式默认为升序

sortOrder: "asc",

// 传递参数到后台，具体参数由oTableInit.queryParams定义

queryParams: oTableInit.queryParams,

// 分页方式选择，这里选择服务端分页

sidePagination: "server",

// 初始化加载第一页数据

pageNumber: 1,

// 设置每页的记录行数

pageSize: 10,

// 可供选择的每页的行数选项设置

pageList: [10, 25, 50, 100]

});

你需要在页面中引入两个JS文件：

``

``

`showExport: true,`

这个属性决定了是否显示导出的按钮。

`exportDataType: "basic",`

这个属性决定了导出的模式，可以选择导出当前页、所有数据或选中数据。

`url: '/Export/GetDepartment',`

这是请求后台数据的URL。

`pagination: true,`

是否显示分页。

`pageSize: 10,`

每页的记录行数。

四、在实际使用中，可能还需要解决一些问题。例如，行内编辑功能每次单元格提交都会造成数据库的频繁操作，可能需要优化。导出的功能虽然强大，但似乎不支持IE浏览器，这需要进行验证和修复。

最后要注意的是，上述内容仅作为示例和参考，具体实现还需要根据实际情况进行调整和优化。