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 相关文章推荐
javascript采用数组实现tab菜单切换效果
Dec 12 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 Javascript
JavaScript原型链示例分享
Jan 26 Javascript
JavaScript function 的 length 属性使用介绍
Sep 15 Javascript
JavaScript中的异常捕捉介绍
Dec 31 Javascript
详解Javascript继承的实现
Mar 25 Javascript
基于AGS JS开发自定义贴图图层
Mar 31 Javascript
关于javascript获取内联样式与嵌入式样式的实例
Jun 01 Javascript
BootStrap Fileinput上传插件使用实例代码
Jul 28 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
Dec 18 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
Aug 27 Javascript
JS中验证整数和小数的正则表达式
Oct 08 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
一个ftp类(ini.php)
2006/10/09 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
Laravel中的chunk组块结果集处理与注意问题
2018/08/15 PHP
关于jQuery中的end()使用方法
2011/07/10 Javascript
javascript实现动态导入js与css等静态资源文件的方法
2015/07/25 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
javascript实现下拉提示选择框
2015/12/29 Javascript
jQuery实现的自定义滚动条实例详解
2016/09/20 Javascript
用jQuery实现优酷首页轮播图
2017/01/09 Javascript
原生js实现新闻列表展开/收起全文功能
2017/01/20 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
vuejs如何配置less
2017/04/25 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
2017/08/04 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
2018/09/27 Javascript
解决vue无法设置滚动位置的问题
2018/10/07 Javascript
Python正则表达式使用经典实例
2016/06/21 Python
Django框架实现逆向解析url的方法
2018/07/04 Python
pandas中read_csv的缺失值处理方式
2019/12/19 Python
Python下利用BeautifulSoup解析HTML的实现
2020/01/17 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
Python序列化pickle模块使用详解
2020/03/05 Python
如何基于Python pygame实现动画跑马灯
2020/11/18 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
详解css3中的伪类before和after常见用法
2020/11/17 HTML / CSS
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
阿里巴巴英国:Alibaba英国
2019/12/11 全球购物
自动化专业毕业生自荐信
2013/11/01 职场文书
建筑班组长岗位职责
2014/01/02 职场文书
党的群众路线教育实践方案
2014/05/11 职场文书
优秀工会工作者事迹材料
2014/06/02 职场文书
建设工地安全标语
2014/06/07 职场文书
基层工作经历证明
2015/06/19 职场文书
离婚协议书范文2016
2016/03/18 职场文书
2019年关于小学生课外阅读情况的分析报告
2019/12/02 职场文书
python爬虫框架feapde的使用简介
2021/04/20 Python