A-A+
使用Bootstrap-Table实现行折叠
相关文章索引:
- 使用Bootstrap-Table实现分页和排序
- 使用Bootstrap-Table实现行折叠
在需要展示的数据量比较大的时候,一般需要将表格的行进行折叠,bootstrap-table其实是支持这种需求的,具体的例子可以参见http://issues.wenzhixin.net.cn/bootstrap-table/#methods/expandRow-collapseRow.html。折叠的截图如下:
但是,由于之前将Bootstrp-table进行了改造,使用加载片段的方式实现数据异步加载,如果使用原生的API就无法实现折叠了。通过分析最终的HTML代码可以看到:
列表新增了一列,用来显示折叠行所用的“+”和“-”图标:
- <th class="detail" rowspan="1"><div class="fht-cell"></div></th>
折叠的一行其实就是合并了单元格的隐藏行,通过JS脚本控制显隐:
- <tr class="detail-view">
- <td colspan="4">
- <p><b>id:</b> 0</p>
- </td>
- </tr>
分析到这里,实现起来就不复杂了,样式是现成的,只需要在原先不需要折叠的基础上增加所需的单元格和JS脚本而已。所以只需要以下几步就可以:
1. 列头增加新的一列,如下所示:
- <table id="dataTable">
- <thead>
- <tr>
- <th class="detail" rowspan="1"><div class="fht-cell"></div></th>
- <th><input id="chkAll" type="checkbox" value=""></th>
- <!--需要显示的列-->
- </tr>
- </thead>
- <tbody id="dataBody">
- </tbody>
- </table>
2. 主体内容新增加一列,用来显示折叠标记,如下所示:
- <tr>
- <td><a class="detail-icon" href="#"> <i class="glyphicon glyphicon-plus icon-plus"></i></a></td>
- <td><input type="checkbox" value="${item.id}"></td>
- <!--需要直接显示的内容-->
- </tr>
3. 紧随上面增加一行,用来显示需要折叠的内容(注意colsplan的值),如下所示:
- <tr class="detail-view" style="display: none;">
- <td colspan="7">
- <!--需要显示的折叠内容-->
- </td>
- </tr>
4. 增加一个JS脚本,用来控制折叠内容的显隐:
- <script>
- $('#dataTable td input[type="checkbox"]').iCheck({
- checkboxClass: 'icheckbox_square-green',
- radioClass: 'iradio_square-green'
- });
- $("#dataTable").find("tr").each(function(){
- var that = this;
- $(this).find("> td > .detail-icon").on("click", function(){
- if($(that).next().is(":hidden")){
- $(this).find(".glyphicon").toggleClass("glyphicon-minus icon-minus");
- $(that).next().show();
- } else {
- $(this).find(".glyphicon").toggleClass("glyphicon-minus icon-minus");
- $(that).next().hide();
- }
- });
- });
- </script>
最后的效果如下:
