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

前端之家收集整理的这篇文章主要介绍了Bootstrap Table快速完美搭建后台管理系统前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Bootstrap Table是基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能

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

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

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

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

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

页面模式的视图。 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: '举报人',{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的所有用到的配置我都在上述代码中做了注释,想看跟详细的配置请看官网配置()。columns配置每一行,field是对应的每一列要显示的字段key值,title对应的是每一列的头部,formatter是格式化每一列的自定义函数,下面只展示时间格式化函数代码:

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

 ','' ].join(''); }

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

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

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

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

猜你在找的Bootstrap相关文章