Bootstrap Table方法：使用expandRow-collapseRow控制行展开与关闭

“Bootstrap Table方法之expandRow-collapseRow展开或关闭当前行数据的示例与解析” Bootstrap Table是一款基于Bootstrap框架的轻量级表格插件，它提供了丰富的功能，包括分页、排序、过滤等，同时也支持自定义列、行操作等。在Bootstrap Table中，`expandRow`和`collapseRow`方法是用于展开或关闭当前行的详细信息展示，以实现表格的层次化显示。这对于展示复杂数据或需要额外信息的情况非常有用。 首先，让我们深入了解`expandRow`和`collapseRow`这两个方法： 1. `expandRow(index)`: 这个方法用于展开指定索引的行。`index`参数是表格中行的索引，从0开始计数。当调用此方法时，Bootstrap Table会在选定的行下方显示一个展开的区域，通常用来显示更多关于该行的数据。 2. `collapseRow(index)`: 相反，这个方法用于关闭指定索引的行。它将隐藏之前由`expandRow`方法打开的详细信息区域。 在提供的代码示例中，可以看到HTML结构包含一个表格和两个按钮，分别绑定了`expandRow`和`collapseRow`方法。这些方法的触发是通过JavaScript事件处理来实现的。以下是关键部分的代码解析： ```html <div id="toolbar"> <button id="button" class="btn btn-default">expandRow</button> <button id="button2" class="btn btn-default">collapseRow</button> </div> ``` 这里的`#toolbar`是放置按钮的容器，两个按钮分别用于展开和关闭行。 ```javascript <script> $(function() { var $table = $('#table'); $('#button').click(function() { var index = $table.bootstrapTable('getSelected')[0]; // 获取选中的行 if (index !== undefined) { $table.bootstrapTable('expandRow', index); // 展开选中行 } }); $('#button2').click(function() { var index = $table.bootstrapTable('getSelected')[0]; if (index !== undefined) { $table.bootstrapTable('collapseRow', index); // 关闭选中行 } }); }); </script> ``` 这段JavaScript代码实现了按钮的功能。`$(function() {...})`是jQuery的文档加载完成后的回调函数，确保在执行代码时DOM已经准备好。`$table.bootstrapTable('method', param)`是调用Bootstrap Table的方法，这里的`method`就是我们关注的`expandRow`或`collapseRow`。 通过`getSelected`获取选中的行的索引，然后根据用户点击的按钮调用相应的展开或关闭方法。请注意，这里假设每次只能选中一行，如果允许多选，可能需要稍微调整代码来处理多个行的展开和关闭。 在实际应用中，为了展示展开行的详细信息，你需要在表格的`data-*`属性或者`detailFormatter`回调函数中定义额外的数据和布局。`detailFormatter`是一个可选的表格选项，用于自定义展开行的内容，可以根据行数据动态生成HTML。 总结来说，`expandRow`和`collapseRow`是Bootstrap Table中用于控制表格行展开和折叠的关键方法。通过这些方法，你可以为用户提供交互式的表格体验，让他们能方便地查看和隐藏详细信息。结合`data-*`属性和`detailFormatter`，你可以定制展开行显示的内容，以满足各种数据展示需求。