JS组件系列之Bootstrap table表格组件神器【二、父子

Bootstrap Table：高级功能——父子表与行列调序

Bootstrap Table以其轻量级、功能丰富的特性，为数据展示提供了强大的支持。无论是单选、复选框、排序、分页，还是显示/隐藏列、固定标题滚动表、响应式设计等，Bootstrap Table都能轻松应对。今天，我们将深入Bootstrap Table的父子表和行列调序这两个高级功能。

一、效果预览

二、父子表功能详解

在注册行展开事件时，我们需要提供三个参数：父表的行索引、当前行的Json数据对象以及一个表示当前行详情的对象。这个详情对象是由bootstrap table为我们生成的，我们只需要往它里面填充我们想要的子表结构即可。

三、行列调序功能

四、代码实现及注意事项

在实现这些高级功能时，我们需要注意以下几点：

1. 确保加载的父子表数据格式正确，以便正确展示层级关系。

2. 在进行行列调序时，注意保持数据的完整性，避免在调序过程中丢失数据。

Bootstrap Table的父子表和行列调序功能为我们提供了更灵活、更丰富的数据展示方式。通过合理应用这些功能，我们可以更好地展示数据，提升用户体验。希望大家能更好地理解和应用这些高级功能。oInit.InitSubTable()方法的奥秘

在设置Bootstrap Table的属性和配置时，有几个关键点值得我们注意。它设置了url参数为'/api/MenuApi/GetChildrenMenu'，这意味着它将从该API获取子菜单的数据。它还设置了queryParams和ajaxOptions参数，将parentid传递给后端，以便后端可以根据父级菜单ID返回相应的子菜单数据。

关于父子关系的处理，这是一个非常有趣的部分。当展开一行时，会触发onExpandRow事件，这时会再次调用oInit.InitSubTable方法，传入当前行的索引、行数据和子详情对象，从而实现了无限循环加载子表数据的功能。这种设计使得我们可以轻松地展示复杂的父子关系数据。

引入外部资源，实现列调序与控件过滤功能

一、引入必要的JS和CSS文件

```html

今天，我们将一起Bootstrap Table这一强大的JS组件，特别是在处理父子表与动态搜索功能方面的应用。让我们来看一下如何在JavaScript中初始化一个Bootstrap Table。

```javascript

$('tb_roles').bootstrapTable({

url: '/Role/GetRole', // 数据来源地址

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

toolbar: 'toolbar', // 工具栏

striped: true, // 隔行变色

cache: false, // 不缓存数据

pagination: true, // 开启分页

sortable: true, // 排序功能

queryParams: function (param) { // 设置查询参数函数，用于自定义查询条件

return param; // 返回查询参数对象，此例中是直接返回传递的param对象，具体需要根据后端接收要求来定制实现。

},

queryParamsType: "limit", // 定义查询参数类型，可以是 'limit' 或 'post' 或 'get' 等等，这里设置的是通过 'limit' 参数传递分页信息到服务器。这对于实现服务端分页非常有用。