微客导航 » 文章资讯 » Bootstrap Table快速完美搭建后台管理系统

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

2023-09-24 09:48:05 365

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

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

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

被举报次数：${count}次

待处理：${stateCountList[0]}次

举报成立：${stateCountList[1]}次

举报不成立：${stateCountList[2]}次

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





${c.complain_reason}：${c.count}次

${c.complain_reason}：${c.count}次

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

var$table=$('.table')
functioninitTable(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时生效19escape: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是格式化每一列的自定义函数,下面只展示时间格式化函数代码：

functiontimeFormat(value,row,index){
value=row.modifyTime==null?value:row.modifyTime;
returnnewDate(parseInt(value)).toLocaleString().replace(/:\d{1,2}$/,'');
}

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

functionactionFormatter(value,row,index){
return[
'',
''
].join('');
}

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

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

functiongoPage(){
varpage=$('#pageNum').val();
$table.bootstrapTable('selectPage',page)
}

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐