BootstrapTable搭建后台管理系统代码分享

现在做的一个app管理以及后台配置系统，需要针对不同的城市作相应的定制化的配置，对一些后台数据也做一些展示和操作，所以每一个模块基本都会有表格的展现形式，这样做的好处就是直观方便操作。对于用什么table插件，无疑就是bootstrap table了，功能强大文档完善，并且我们项目里也是基于bootstrap布局的，所以就选择了他，接下来就贴一些项目代码来展示（仅供参考），自己也做一下笔记。

首先是用到了bootstrap的Tab来切换不同的表格用于展示，切换菜单代码如下：

 <p class="report-count">被举报次数：${count}次</p>
  <ul class="report-btn nav nav-tabs" id="myTab" >
    <li class="pending active"><a href="#padding" onclick="freashTable(0)" data-toggle="tab">待处理：${stateCountList[0]}次</a><i class=""></i></li>
    <li class="success-report"><a href="#success-report" onclick="freashTable(1)" data-toggle="tab">举报成立：${stateCountList[1]}次</a></li>
    <li class="fail-report"><a href="#fail-report" onclick="freashTable(2)" data-toggle="tab">举报不成立：${stateCountList[2]}次</a></li>
  </ul>

相信对于bootstrap并不陌生，给每一个需要切换的标签 加上｛data-toggle="tab"｝，并且增加锚点用于匹配到对应的切换的子内容｛锚点：href="#padding" rel="external nofollow" ｝，切换对应的字内容代码如下：

<p class="table-view tab-content">
      <p class=" tab-pane fade in active" id="padding">
       <p class="table-header clear">
        <c:forEach items="${complainCount1}" varStatus="i" var="c" >
         <p>${c.complain_reason}：${c.count}次</p>
        </c:forEach>
       </p>
       <p class="line addStyle"></p>
       <p>
        <table class="table"></table>
       </p>
      </p>
      <p class="tab-pane fade" id="success-report">
       <p class="table-header clear">
        <c:forEach items="${complainCount2}" varStatus="i" var="c" >
         <p>${c.complain_reason}：${c.count}次</p>
        </c:forEach>
       </p>
       <p class="line addStyle"></p>
       <p>
        <table class="table"></table>
       </p>
      </p>
      <p class="tab-pane fade" id="fail-report">
       <p class="table-header clear">
        <c:forEach items="${complainCount3}" varStatus="i" var="c" >
         <p>${c.complain_reason}：${c.count}次</p>
        </c:forEach>
       </p>
       <p class="line addStyle"></p>
       <p>
        <table class="table"></table>
       </p>
      </p>
     </p>

通过给每一个需要切换子内容元素设置对应上述锚点的id｛#padding｝,并且不要忘了给外层容器加（tab-content），给子元素容器加class(tab-pane fade in active),有active的就是默认选中的。每一个子内容都有一个table元素，所以这里就是我们需要的table，切换每一个tab就会刷新显示对应的table数据。这里我们采用动态的生成table的方式加载数据。

以上就是初始化table的函数，传index是为了切换时候请求不同的地址刷新不同的table，因为在每一个tab切换菜单都有onclick事件函数 freashTable（index）,table的所有用到的配置我都在上述代码中做了注释，想看跟详细的配置请看官网配置（http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/）。columns配置每一行，field是对应的每一列要显示的字段key值，title对应的是每一列的头部，formatter是格式化每一列的自定义函数,下面只展示时间格式化函数代码：

对应的field为action的那一行就是操作按钮了，格式化操作按钮代码如下：

同时分页bootstrap已经提供了完整的配置（包括每页显示的行数，分页按钮，总条数和总页数等等）但是没有跳转到指定行，所以需要我们自己写他的样式定位到相应的分页栏，不过他有相关的方法提供，

selectPage就是跳到指定页，我们可以自己系一个方法：

在用其方法时候，要$table.bootstrapTable('selectPage',page)使用。

相关推荐：

使用React全家桶搭建一个后台管理系统实例详解

基于thinkphp的后台管理系统模板快速搭建

Bootstrap Table快速搭建后台管理系统

以上就是Bootstrap Table搭建后台管理系统代码分享的详细内容，更多请关注Gxl网其它相关文章！