bootstraptable急速完美搭建后台管理系统

Galary      2022-02-09     728

关键词:

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

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

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

技术分享
1     <div class="report-count">被举报次数:${count}次</div>
2       <ul class="report-btn nav nav-tabs" id="myTab" >
3              <li class="pending active"><a href="#padding" onclick="freashTable(0)"  data-toggle="tab">待处理:${stateCountList[0]}次</a><i class=""></i></li>
4              <li class="success-report"><a href="#success-report" onclick="freashTable(1)" data-toggle="tab">举报成立:${stateCountList[1]}次</a></li>
5              <li class="fail-report"><a href="#fail-report" onclick="freashTable(2)" data-toggle="tab">举报不成立:${stateCountList[2]}次</a></li>
6        </ul> 
View Code

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

技术分享
  <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>
View Code        

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

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

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

1 function timeFormat(value,row,index){
2     value = row.modifyTime==null?value:row.modifyTime;
3     return new Date(parseInt(value)).toLocaleString().replace(/:d{1,2}$/,‘ ‘);
4 }

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

技术分享
1 function actionFormatter(value, row, index) {
2     return [
3         ‘<a class="update" href="javascript:;" onclick="editdateAction(‘‘ + row.systemId + ‘‘)" data-toggle="tooltip" title="Edit"><i class="glyphicon glyphicon-edit"></i></a> ‘,
4         ‘<a class="delete" href="javascript:;" onclick="deleteRowAction(‘‘+row.systemId+‘‘)" data-toggle="tooltip" title="Remove"><i class="glyphicon glyphicon-remove"></i></a>‘
5     ].join(‘‘);
6 }
View Code

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

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

技术分享
1 function goPage(){
2     var page=$(‘#pageNum‘).val();
3     $table.bootstrapTable(‘selectPage‘,page)
4 }
View Code

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

abp+adminlte+bootstraptable权限管理系统第十一节--bootstraptable之用户管理列表

     这张开始bootstraptable,引入项目有两种方法,一种是直接去官网下载    地址:http://bootstrap-table.wenzhixin.net.cn/    另一种是Nuget引入.    &nbs 查看详情

bootstraptable使用心得总结

...的表格控件,查询到:http://bootstrap-table.wenzhixin.net.cn的BootstrapTable感觉挺不错,但是由于官方的文档不是怎么的完善,导致自己的网络数据请求一直没有通过。今天终于调试通过,在这里与大家分享一下。一、相关... 查看详情

abpmodule-zero+adminlte+bootstraptable+jquery权限管理系统第十二节--小结,bootstraptable之角色管理

  返回总目录:ABP+AdminLTE+BootstrapTable权限管理系统一期     很多人说ABP不适合高并发大型,有一定的道理,但是我觉得还是可以的,就看架构师的能力了,我之前公司就是ABP绝对百万数据级项目,是一个在线教育... 查看详情

vue+element搭建后台管理系统(代码片段)

接口请求格式定义前台显示需要后台数据,我们这里先把前后端交互接口定义好,没有后台的时候,也方便用mock模拟。接口定义遵循几个规范:1.接口按功能模块划分。系统登录:登录相关接口用户管理:用户管理相关接口机构... 查看详情

淘淘商城_0200_搭建后台管理系统

 后台管理系统工程搭建项目是maven项目,Maven的工程类型: 1、war包工程:web工程2、Jar包工程:java工程,打完是一个jar包3、Pom工程:父工程,聚合工程 ,这两个一般合起来用,pom工程即做父工程,又做聚合工程来聚合... 查看详情

react搭建后台管理系统

先准备工具:  yarn安装:    npminstall-gyarn#yarn也是包管理工具,只不过它构建效率更高    官方使用教程:https://yarnpkg.com/lang/zh-hans/docs/cli/    安装Semantic组件库,react-semantic官方地址:https://react.semantic-ui.c... 查看详情

外盘期货平台搭建期货行情软件定制crm后台管理系统-外盘期货交易软件-易投

...可抗性因素除外);6)容载量应可弹性扩容,在访问量急速增加时,应可以通过增加网络带宽、服务器数量等措施,支持更大数量的访问;现经过1年时间的封闭开发,我们已经研发出一款针对期货投资管理的资管软件——易投... 查看详情

vuejs和element搭建的一个后台管理界面(代码片段)

介绍:  这是一个用vuejs2.0和element搭建的后台管理界面。 相关技术:  vuejs2.0:渐进式JavaScript框架,易用、灵活、高效,似乎任何规模的应用都适用。  element:基于vuejs2.0的ui组件库。  vue-router:一般单页面应用spa... 查看详情

bootstraptable前端分页不显示数据

参考技术AbootstrapTable后台分页改前台分页不仅仅是改一个sidePagination就行,返回的数据格式也要改通常后台分页设置参数后台返回的数据格式,包含总条数和当前页显示的数据如果想要前台分页,修改参数后台返回的数据不能再是... 查看详情

从零搭建java后台管理系统

框架搭建一、初步设想,使用springboot,框架打算用到依赖springweb,devTools,mysql,Aspect,Redis,Lombok,Freemark,Shiro,Rabbitmq,MyBatis登录start.spring.io自动生成springboot项目,把能加的依赖都加进来生成目录结构如下之后再添加些必要... 查看详情

vue+element-uijyadmin后台管理系统模板-集成方案项目搭建篇1(代码片段)

  项目搭建时间:2020-06-29本章节:讲述基于vue/cli,项目的基础搭建。本主题讲述了vue+element-uiJYAdmin后台管理系统模板-集成方案,从零到一的手写搭建全过程。该项目不仅是一个持续完善、高效简洁的后台管理系统模板,... 查看详情

vue+element搭建后台管理系统(代码片段)

...供了vue、react、angular等多个版本,我们这里使用vue版本来搭建我们的界面。访问:http://element-cn.eleme.io/#/zh-CN/component 查看详情

vue+element搭建后台管理系统(代码片段)

技术基础开发之前,请先熟悉下面的4个文档vue.js2.0中文,项目所使用的js框架vue-router,vue.js配套路由vuex,状态管理Element,UI框架开发环境NodeJS(npm)VisualStudioCode(前端IDE)安装VisualStudioCode下载地址: 官网下载地址VisualStudioCod... 查看详情

vue搭建后台管理页面(点击左侧导航,切换右侧内容)

home.vue页面<template><divstyle="background-color:#EBEBEB;min-height:900px"><divstyle="width:100%;background-color:#636363;overflow:hidden"><spanclass="demonstration"style="float:le 查看详情

利用xadmin快速搭建后台管理系统(代码片段)

环境:python3.5.2,django2.0,xadmin2.0Firsttly到https://github.com/sshwsfc/xadmin/tree/django2上下载源码,之后把其中的xadmin目录放在项目目录中新建的extra_apps这个目录中 Secondly将extra_appsmarkassourceroot,然后在settings中将其导入到python的 查看详情

e01:后台管理系统开发-开发环境搭建(代码片段)

...要会对博客文章的管理和登录系统进行讲解。本文主要是搭建后端开发环境。用脚手架生成项目进入项目目录,然后直接使用create-react-app生成目录,记得生成的目录要全部小写。create-react-appadmin安装好以后,把项目进行最小化... 查看详情

e01:后台管理系统开发-开发环境搭建(代码片段)

...要会对博客文章的管理和登录系统进行讲解。本文主要是搭建后端开发环境。用脚手架生成项目进入项目目录,然后直接使用create-react-app生成目录,记得生成的目录要全部小写。create-react-appadmin安装好以后,把项目进行最小化... 查看详情

bootstraptable使用小记

varTableInit=function(){varoTableInit=newObject();//初始化TableoTableInit.Init=function(){$(‘#tb_rolelist‘).bootstrapTable({url:‘/Role/GetList‘,//请求后台的URL(*)method:‘get‘,//请求方式(*)toolbar:‘#toolbar‘,//工具按 查看详情