Bootstrap table的使用方法
来源:互联网 发布:通信算法工程师笔试题 编辑:程序博客网 时间:2024/05/16 14:58
最近接触一个NB插件,Bootstrap table 没做过前端的表示对table的印象还只停留在html的table标签那一套,用过bootstrap table之后不得不说真是牛X。
构造方式
1 、HTML
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
2 、 js构造:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
结合官网上展示的Table options,Column options,Events,Methods可以完成很多功能。上面的data-formatter ,data-events就是Column options中的选项 。
data-formatter 和 data-events
要实现如下效果,用上面两个option配合使用即可,一个定义格式,一个定义点击的操作。
直接上js代码
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
服务器分页/客户端分页的转换,table刷新
bootstrap默认是客户端分页 ,可通过html标签
- 1
- 1
或者js中的
- 1
- 1
指定。注意,这两种后台传过来的json数据格式也不一样
client : 正常的json array格式 [{},{},{}]
server: {“total”:0,”rows”:[]} 其中total表示查询的所有数据条数,后面的rows是指当前页面展示的数据量。
有事需要根据情况改变分页方式,就要用到Methods中的
‘refreshOptions’ //设置更新时候的options
‘refresh’ //设置更新时的 url ,query(往后台传参数)
0 0
- Bootstrap table的使用方法
- JS组件Bootstrap Table使用方法详解
- Bootstrap Table使用方法详解 作者:aozeahj
- bootstrap table的实现
- bootstrap-table的使用
- bootstrap-table的使用
- Bootstrap-fileinput的使用方法
- Bootstrap的基本使用方法
- Node.js中Bootstrap-table的两种分页的使用方法
- El Table的使用方法
- bootstrap-table 插件的使用
- 开发bootstrap的table列表
- Bootstrap Table的例子(转载)
- bootstrap-table 分页的问题
- bootstrap table的常用操作
- bootstrap-table 分页的问题
- Bootstrap Table的使用小结
- bootstrap设置table的样式
- 各种字符串Hash函数比较
- C++ STL系列学习一之 STL基本概念
- 1.1.零web,js基础开发ReactNative_建立工程
- iOS CoreAnimation之CABasicAnimation:文字路径动画
- cocos2d-x 3.13 定时器Schedule 三种方式
- Bootstrap table的使用方法
- Opencv 特征训练分类器
- C++抽象编程——回溯算法(5)——Nim游戏代码及其反思
- Linux ftp 限制目录切换
- 换地方咯~
- SpringBoot 入门:整合MongoDB,做简单查找功能
- Hadoop基础教程-第1章 环境安装配置(1.7 目录规划)
- Shell 练习题 41-50,内附答案
- Docker的Swarm模式