Bootstrap Table创建后台管理系统
Bootstrap Table是基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等的功能。
工具/原料
- JavaScript
方法/步骤
- 1
首先是用到了bootstrap的Tab来切换不同的表格用于展示，切换菜单代码如下：
- 2
给每一个需要切换的标签 加上｛data-toggle="tab"｝，并且增加锚点用于匹配到对应的切换的子内容｛锚点：href="#padding" rel="external nofollow" ｝，切换对应的字内容代码如下：
- 3
每一个需要切换子内容元素设置对应上述锚点的id｛#padding｝,给外层容器加（tab-content），给子元素容器加class(tab-pane fade in active),有active的就是默认选中的。每一个子内容都有一个table元素，需要的table切换每一个tab就会刷新显示对应的table数据。采用动态的生成table的方式加载数据。
- 4
以上就是初始化table的函数，传index是为了切换时候请求不同的地址刷新不同的table，在每一个tab切换菜单都有onclick事件函数 freashTable（index）,table的所有用到的配置都在上述代码中做了注释，columns配置每一行，field是对应的每一列要显示的字段key值，title对应的是每一列的头部，formatter是格式化每一列的自定义函数,下面只展示时间格式化函数代码：
- 5
对应的field为action的那一行就是操作按钮了，格式化操作按钮代码如下：
- 6
同时分页bootstrap已经提供了完整的配置（包括每页显示的行数，分页按钮，总条数和总页数等等）但是没有跳转到指定行，所以需要我们自己写他的样式定位到相应的分页栏，不过他有相关的方法提供，
selectPage就是跳到指定页，我们可以自己系一个方法：
- 发表于 2018-02-08 00:00
- 阅读 ( 698 )
- 分类：其他类型
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章