A-A+

使用Bootstrap-Table实现行折叠

2018年04月01日 技术, 默认 暂无评论 阅读 15,514 次

相关文章索引:

  1. 使用Bootstrap-Table实现分页和排序
  2. 使用Bootstrap-Table实现行折叠

在需要展示的数据量比较大的时候,一般需要将表格的行进行折叠,bootstrap-table其实是支持这种需求的,具体的例子可以参见http://issues.wenzhixin.net.cn/bootstrap-table/#methods/expandRow-collapseRow.html。折叠的截图如下:

但是,由于之前将Bootstrp-table进行了改造,使用加载片段的方式实现数据异步加载,如果使用原生的API就无法实现折叠了。通过分析最终的HTML代码可以看到:

列表新增了一列,用来显示折叠行所用的“+”和“-”图标:

  1. <th class="detail" rowspan="1"><div class="fht-cell"></div></th>

折叠的一行其实就是合并了单元格的隐藏行,通过JS脚本控制显隐:

  1. <tr class="detail-view">
  2.     <td colspan="4">
  3.         <p><b>id:</b> 0</p>
  4.     </td>
  5. </tr>

分析到这里,实现起来就不复杂了,样式是现成的,只需要在原先不需要折叠的基础上增加所需的单元格和JS脚本而已。所以只需要以下几步就可以:

1. 列头增加新的一列,如下所示:

  1. <table id="dataTable">
  2.     <thead>
  3.     <tr>
  4.         <th class="detail" rowspan="1"><div class="fht-cell"></div></th>
  5.         <th><input id="chkAll" type="checkbox" value=""></th>
  6.         <!--需要显示的列-->
  7.     </tr>
  8.     </thead>
  9.     <tbody id="dataBody">
  10.     </tbody>
  11. </table>

2. 主体内容新增加一列,用来显示折叠标记,如下所示:

  1. <tr>
  2.     <td><a class="detail-icon" href="#"> <i class="glyphicon glyphicon-plus icon-plus"></i></a></td>
  3.     <td><input type="checkbox" value="${item.id}"></td>
  4.     <!--需要直接显示的内容-->
  5. </tr>

3. 紧随上面增加一行,用来显示需要折叠的内容(注意colsplan的值),如下所示:

  1. <tr class="detail-view" style="display: none;">
  2.     <td colspan="7">
  3.         <!--需要显示的折叠内容-->
  4.     </td>
  5. </tr>

4. 增加一个JS脚本,用来控制折叠内容的显隐:

  1. <script>
  2.     $('#dataTable td input[type="checkbox"]').iCheck({
  3.         checkboxClass: 'icheckbox_square-green',
  4.         radioClass: 'iradio_square-green'
  5.     });
  6.     $("#dataTable").find("tr").each(function(){
  7.         var that = this;
  8.         $(this).find("> td > .detail-icon").on("click"function(){
  9.             if($(that).next().is(":hidden")){
  10.                 $(this).find(".glyphicon").toggleClass("glyphicon-minus icon-minus");
  11.                 $(that).next().show();
  12.             } else {
  13.                 $(this).find(".glyphicon").toggleClass("glyphicon-minus icon-minus");
  14.                 $(that).next().hide();
  15.             }
  16.         });
  17.     });
  18. </script>

最后的效果如下:

觉的不错?可以关注我的公众号↑↑↑

给我留言

Copyright © 字痕随行 保留所有权利.   Theme  Ality

用户登录

分享到: