这篇文章主要为大家详细介绍了Bootstrap Table快速完美搭建后台管理系统的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

Bootstrap Table是基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

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

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

 <div>被次数:${count}次</div>
  <ul id="myTab" >
    <li><a href="#padding" onclick="freashTable(0)">待处理:${stateCountList[0]}次</a><i></i></li>
    <li><a href="#success-report" onclick="freashTable(1)">成立:${stateCountList[1]}次</a></li>
    <li><a href="#fail-report" onclick="freashTable(2)">不成立:${stateCountList[2]}次</a></li>
  </ul>

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

<div>
      <div id="padding">
       <div>
        <c:forEach items="${complainCount1}" varStatus="i" var="c" >
         <div>${c.complain_reason}:${c.count}次</div>
        </c:forEach>
       </div>
       <div></div>
       <div>
        <table></table>
       </div>
      </div>
      <div id="success-report">
       <div>
        <c:forEach items="${complainCount2}" varStatus="i" var="c" >
         <div>${c.complain_reason}:${c.count}次</div>
        </c:forEach>
       </div>
       <div></div>
       <div>
        <table></table>
       </div>
      </div>
      <div id="fail-report">
       <div>
        <c:forEach items="${complainCount3}" varStatus="i" var="c" >
         <div>${c.complain_reason}:${c.count}次</div>
        </c:forEach>
       </div>
       <div></div>
       <div>
        <table></table>
       </div>
      </div>
     </div> 

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

var $table=$('.table')
function initTable(index){
  $table.bootstrapTable({
  url: '${basePath}/interacts/complain/getComplainList?pkid='+$("#pkid").val()+'&state='+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: 'detailFormatter', //格式化详细页面模式的视图。
  pagination: true, //展示有分页
  paginationLoop: false, //循环分页
  sidePagination: 'server', //设置在哪里进行分页,可选值为 'client' 或者 'server'。设置 'server'时,必须设置 服务器数据地址(url)或者重写ajax方法
  silentSort: false, //设置为 false 将在点击分页按钮时,自动记住排序项。仅在 sidePagination设置为 server时生效19   escape: true, //转义HTML字符串,替换 &, <, >, ", `, 和 ' 字符.
  searchOnEnterKey: true, //设置为 true时,按回车触发搜索方法,否则自动触发搜索方法
  idField: 'systemId', //指定主键
  maintainSelected: true, //设置为 true 在点击分页按钮或搜索按钮时,将记住checkbox的选择项
  toolbar: '#toolbar', //一个jQuery 选择器,指明自定义的toolbar 
  columns: [
    {field: 'complain_reason', title: '类型',align: 'center'},
    {field: 'nick_name', title: '人',align: 'center'},
    {field: 'create_time', title: '时间',formatter:'timeFormat' },
    {field: 'complain_state', title: '状态',formatter:'stateFormat'}
    {field: 'action', title: '操作', align: 'center', formatter: 'actionFormatter', events: 'actionEvents', 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}$/,' ');
 }

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

function actionFormatter(value, row, index) {
 return [
  '<a href="javascript:;" onclick="editdateAction(\'' + row.systemId + '\')" title="Edit"><i></i></a> ',
  '<a href="javascript:;" onclick="deleteRowAction(\''+row.systemId+'\')" title="Remove"><i></i></a>'
 ].join('');
}

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

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

function goPage(){
  var page=$('#pageNum').val();
  $table.bootstrapTable('selectPage',page)
 }

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱安网。

最新资讯
猛涨闪崩 比特币经历了什么?

猛涨闪崩 比特币经历

币圈的世界,总是充满着刺激和不确定。
这个“黑五”有点冷:疫情带来健康和财务双重压力

这个“黑五”有点冷:疫

受新冠疫情影响,今年“黑五”选择到店购物的美国消费者
代销乱象难解 “李鬼”信托扯出诈骗产业链

代销乱象难解 “李鬼

金融行业、产品“触网”背景下,人们获取信息的渠道更加
跨境电商“眼馋”私域流量 熟人带货会是考拉的出路吗?

跨境电商“眼馋”私域

跨境电商对私域流量念念不忘。
网传虾米音乐将于明年关闭 官方暂无回应

网传虾米音乐将于明年

有用户在社交平台上称虾米音乐将于明年1月关闭。新浪
嫦娥五号探测器再次实施制动,进入近圆形环月轨道飞行

嫦娥五号探测器再次实

北京时间11月29日20时23分,嫦娥五号探测器在近月点再次
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,