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


Posted in Javascript onSeptember 20, 2017

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

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

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

<div class="report-count">被举报次数:${count}次</div>
  <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" },切换对应的字内容代码如下:

<div class="table-view tab-content">
      <div class=" tab-pane fade in active" id="padding">
       <div class="table-header clear">
        <c:forEach items="${complainCount1}" varStatus="i" var="c" >
         <div>${c.complain_reason}:${c.count}次</div>
        </c:forEach>
       </div>
       <div class="line addStyle"></div>
       <div>
        <table class="table"></table>
       </div>
      </div>
      <div class="tab-pane fade" id="success-report">
       <div class="table-header clear">
        <c:forEach items="${complainCount2}" varStatus="i" var="c" >
         <div>${c.complain_reason}:${c.count}次</div>
        </c:forEach>
       </div>
       <div class="line addStyle"></div>
       <div>
        <table class="table"></table>
       </div>
      </div>
      <div class="tab-pane fade" id="fail-report">
       <div class="table-header clear">
        <c:forEach items="${complainCount3}" varStatus="i" var="c" >
         <div>${c.complain_reason}:${c.count}次</div>
        </c:forEach>
       </div>
       <div class="line addStyle"></div>
       <div>
        <table class="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 class="update" href="javascript:;" onclick="editdateAction(\'' + row.systemId + '\')" data-toggle="tooltip" title="Edit"><i class="glyphicon glyphicon-edit"></i></a> ',
  '<a class="delete" href="javascript:;" onclick="deleteRowAction(\''+row.systemId+'\')" data-toggle="tooltip" title="Remove"><i class="glyphicon glyphicon-remove"></i></a>'
 ].join('');
}

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

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
鼠标事件延时切换插件
Mar 12 Javascript
javascript之bind使用介绍
Oct 09 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
Jun 27 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 Javascript
javascript回到顶部特效
Jul 30 Javascript
浅谈键盘上回车按钮的js触发事件
Feb 13 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
Feb 13 Javascript
ES6学习笔记之map、set与数组、对象的对比
Mar 01 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
Aug 30 Javascript
vue生命周期和react生命周期对比【推荐】
Sep 19 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
May 19 Javascript
VUE页面中加载外部HTML的示例代码
Sep 20 #Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
Sep 20 #Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
Sep 20 #Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
Sep 20 #Javascript
用vue构建多页面应用的示例代码
Sep 20 #Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 #Javascript
微信小程序 input表单与redio及下拉列表的使用实例
Sep 20 #Javascript
You might like
PHP之COOKIE支持详解
2010/09/20 PHP
使用phpQuery采集网页的方法
2013/11/13 PHP
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
3个PHP多维数组转为一维数组的方法实例
2014/03/13 PHP
使用swoole 定时器变更超时未支付订单状态的解决方案
2019/07/24 PHP
JavaScript Event学习第五章 高级事件注册模型
2010/02/07 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
动态的创建一个元素createElement及删除一个元素
2014/01/24 Javascript
JavaScript实现的背景自动变色代码
2015/10/17 Javascript
Bootstrap每天必学之警告框插件
2016/04/26 Javascript
老生常谈onBlur事件与onfocus事件(js)
2016/07/09 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
2016/08/17 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
2017/02/28 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
2017/04/13 jQuery
详解nodejs实现本地上传图片并预览功能(express4.0+)
2017/06/28 NodeJs
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
react-native DatePicker日期选择组件的实现代码
2017/09/12 Javascript
JS中Attr的用法详解
2017/10/09 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
2018/09/26 Javascript
NodeJs生成sitemap站点地图的方法示例
2019/06/11 NodeJs
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
世界上最短的数字判断js代码
2019/09/09 Javascript
javascript执行上下文、变量对象实例分析
2020/04/25 Javascript
用Python的Flask框架结合MySQL写一个内存监控程序
2015/11/07 Python
Python利用ElementTree模块处理XML的方法详解
2017/08/31 Python
EM算法的python实现的方法步骤
2018/01/02 Python
解决tensorflow 释放图,删除变量问题
2020/06/23 Python
美国在线家具网站:GDFStudio
2021/03/13 全球购物
鸟的天堂导游词
2015/01/31 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书
使用Pytorch实现two-head(多输出)模型的操作
2021/05/28 Python
Python turtle编写简单的球类小游戏
2022/03/31 Python
ant design vue的form表单取值方法
2022/06/01 Vue.js