登录  /  注册
首页 > web前端 > js教程 > 正文

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

小云云
发布: 2018-02-07 14:13:35
原创
1545人浏览过

bootstrap table是基于 bootstrap 的 jquery 表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能。本文主要和大家介绍bootstrap table快速完美搭建后台管理系统的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。

现在做的一个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的方式加载数据。


var $table=$(&#39;.table&#39;)
function initTable(index){
  $table.bootstrapTable({
  url: &#39;${basePath}/interacts/complain/getComplainList?pkid=&#39;+$("#pkid").val()+&#39;&state=&#39;+index, //请求数据地址url
  height: getHeight(), //获取行高
  striped: true, //设置为 true 会有隔行变色效果
  search: true, //为true会有搜索框
  showRefresh: true, //为true有刷新按钮
  showColumns: true, //是否显示 内容列下拉框
  minimumCountColumns: 2,//当列数小于此值时,将隐藏内容列下拉框
  clickToSelect: true, //点击行是checkbox或者rediobox选中
  detailView: true, //设置为 true 可以显示详细页面模式。table第一行会有+号,点击会出现更详细的该行信息
  detailFormatter: &#39;detailFormatter&#39;, //格式化详细页面模式的视图。
  pagination: true, //展示有分页
  paginationLoop: false, //循环分页
  sidePagination: &#39;server&#39;, //设置在哪里进行分页,可选值为 &#39;client&#39; 或者 &#39;server&#39;。设置 &#39;server&#39;时,必须设置 服务器数据地址(url)或者重写ajax方法
  silentSort: false, //设置为 false 将在点击分页按钮时,自动记住排序项。仅在 sidePagination设置为 server时生效19   escape: true, //转义HTML字符串,替换 &, <, >, ", `, 和 &#39; 字符.
  searchOnEnterKey: true, //设置为 true时,按回车触发搜索方法,否则自动触发搜索方法
  idField: &#39;systemId&#39;, //指定主键
  maintainSelected: true, //设置为 true 在点击分页按钮或搜索按钮时,将记住checkbox的选择项
  toolbar: &#39;#toolbar&#39;, //一个jQuery 选择器,指明自定义的toolbar 
  columns: [
    {field: &#39;complain_reason&#39;, title: &#39;举报类型&#39;,align: &#39;center&#39;},
    {field: &#39;nick_name&#39;, title: &#39;举报人&#39;,align: &#39;center&#39;},
    {field: &#39;create_time&#39;, title: &#39;举报时间&#39;,formatter:&#39;timeFormat&#39; },
    {field: &#39;complain_state&#39;, title: &#39;举报状态&#39;,formatter:&#39;stateFormat&#39;}
    {field: &#39;action&#39;, title: &#39;操作&#39;, align: &#39;center&#39;, formatter: &#39;actionFormatter&#39;, events: &#39;actionEvents&#39;, clickToSelect: false}
   ]
  });
}
登录后复制

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


function timeFormat(value,row,index){
  value = row.modifyTime==null?value:row.modifyTime;
 return new Date(parseInt(value)).toLocaleString().replace(/:\d{1,2}$/,&#39; &#39;);
 }
登录后复制

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


function actionFormatter(value, row, index) {
 return [
  &#39;<a class="update" href="javascript:;" onclick="editdateAction(\&#39;&#39; + row.systemId + &#39;\&#39;)" data-toggle="tooltip" title="Edit"><i class="glyphicon glyphicon-edit"></i></a> &#39;,
  &#39;<a class="delete" href="javascript:;" onclick="deleteRowAction(\&#39;&#39;+row.systemId+&#39;\&#39;)" data-toggle="tooltip" title="Remove"><i class="glyphicon glyphicon-remove"></i></a>&#39;
 ].join(&#39;&#39;);
}
登录后复制

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

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


function goPage(){
  var page=$(&#39;#pageNum&#39;).val();
  $table.bootstrapTable(&#39;selectPage&#39;,page)
 }
登录后复制

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

相关推荐:

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

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

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

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

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号