Bootstrap table使用方法汇总


本文摘自PHP中文网,作者angryTom,侵删。

  bootstrap-table是在bootstrap-table的基础上写出来的,专门用于显示数据的表格插件。而bootstrap是来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,具有简便灵活,快速前端开发的优势。对与bootstrap在此就不在叙述。本文将着重讲解自己在项目中使用到bootstrap-table的一些理解和如何学习它。

推荐教程:Bootstrap入门教程

  首先交代一下,jquery ,bootstrap ,bootstrap-table 三者之间的关系。bootstrap很多部分代码涉及到了jquery的,也就是说 bootstrap是依赖jquery的,而我们要使用的bootstrap-table则是在bootstrap基础上创造出来的,所以在使用bootstrap-table之前必须引用 jquery 和bootstrap的相关js,css文件。

  接着说,bootstrap-table的特点:与jquery-ui,jqgrid等表格显示插件而言,bootstrap-table扁平化,轻量级,对于一些轻量级的数据显示,他是绰绰有余,而对父子表等的支持也很好,最主要的是可以与bootstrap的其他标签无缝组合。

1、引入js、css

1

2

3

4

5

6

7

8

<!--css样式-->

<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">

<link href="css/bootstrap/bootstrap-table.css" rel="stylesheet">

<!--js-->

<script src="js/bootstrap/jquery-1.12.0.min.js" type="text/javascript"></script>

<script src="js/bootstrap/bootstrap.min.js"></script>

<script src="js/bootstrap/bootstrap-table.js"></script>

<script src="js/bootstrap/bootstrap-table-zh-CN.js"></script>

2、table数据填充

  bootStrap table获取数据有两种方式,一是通过table 的data-url属性指定数据源,二是通过JavaScript初始化表格时指定url来获取数据

1

2

3

4

5

6

7

8

9

<table data-toggle="table">

 <thead>

 ...

 </thead>

</table>

 ...

$('#table').bootstrapTable({

 url: 'data.json'

 });

  第二种方式较第一种而言在处理复杂数据时更为灵活,一般使用第二种方式来进行table数据填充。

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

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

$(function () {

  

 //1.初始化Table

 var oTable = new TableInit();

 oTable.Init();

  

 //2.初始化Button的点击事件

 /* var oButtonInit = new ButtonInit();

 oButtonInit.Init(); */

  

 });

  

  

 var TableInit = function () {

 var oTableInit = new Object();

 //初始化Table

 oTableInit.Init = function () {

 $('#tradeList').bootstrapTable({

 url: '/VenderManager/TradeList', //请求后台的URL(*)

 method: 'post'//请求方式(*)

 toolbar: '#toolbar', //工具按钮用哪个容器

 striped: true//是否显示行间隔色

 cache: false//是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)

 pagination: true//是否显示分页(*)

 sortable: false//是否启用排序

 sortOrder: "asc"//排序方式

 queryParams: oTableInit.queryParams,//传递参数(*)

 sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)

 pageNumber:1,  //初始化加载第一页,默认第一页

 pageSize: 50,  //每页的记录行数(*)

 pageList: [10, 25, 50, 100], //可供选择的每页的行数(*)

 strictSearch: true,

 clickToSelect: true, //是否启用点击选中行

 height: 460,  //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度

 uniqueId: "id"//每一行的唯一标识,一般为主键列

 cardView: false//是否显示详细视图

 detailView: false//是否显示父子表

 columns: [{

  field: 'id',

  title: '序号'

 }, {

  field: 'liushuiid',

  title: '交易编号'

 }, {

  field: 'orderid',

  title: '订单号'

 }, {

  field: 'receivetime',

  title: '交易时间'

 }, {

  field: 'price',

  title: '金额'

 }, {

  field: 'coin_credit',

  title: '投入硬币'

 }, {

  field: 'bill_credit',

  title: '投入纸币'

 }, {

  field: 'changes',

  title: '找零'

 }, {

  field: 'tradetype',

  title: '交易类型'

 },{

  field: 'goodmachineid',

  title: '货机号'

 },{

  field: 'inneridname',

  title: '货道号'

 },{

  field: 'goodsName',

  title: '商品名称'

 }, {

  field: 'changestatus',

  title: '支付'

 },{

  field: 'sendstatus',

  title: '出货'

 },]

 });

 };

  

 //得到查询的参数

 oTableInit.queryParams = function (params) {

 var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的

 limit: params.limit, //页面大小

 offset: params.offset, //页码

 sdate: $("#stratTime").val(),

 edate: $("#endTime").val(),

 sellerid: $("#sellerid").val(),

 orderid: $("#orderid").val(),

 CardNumber: $("#CardNumber").val(),

 maxrows: params.limit,

 pageindex:params.pageNumber,

 portid: $("#portid").val(),

 CardNumber: $("#CardNumber").val(),

 tradetype:$('input:radio[name="tradetype"]:checked').val(),

 success:$('input:radio[name="success"]:checked').val(),

 };

 return temp;

 };

 return oTableInit;

 };

field字段必须与服务器端返回的字段对应才会显示出数据。

3、后台获取数据

a、servlet获取数据

1

2

3

4

5

6

7

8

9

10

11

BufferedReader bufr = new BufferedReader(

 new InputStreamReader(request.getInputStream(),"UTF-8"));

 StringBuilder sBuilder = new StringBuilder("");

 String temp = "";

 while((temp = bufr.readLine()) != null){

 sBuilder.append(temp);

 }

 bufr.close();

 String json = sBuilder.toString();

 JSONObject json1 = JSONObject.fromObject(json);

 String sdate= json1.getString("sdate");//通过此方法获取前端数据

b、springMvc Controller里面对应的方法获取数据

1

2

3

4

public JsonResult GetDepartment(int limit, int offset, string orderId, string SellerId,PortId,CardNumber,Success,maxrows,tradetype)

{

 ...

}

以上就是本文的全部内容,希望对大家的学习有所帮助。

以上就是Bootstrap table使用方法汇总的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

bootstrap怎么给input加图标

bootstrap中怎么设置按钮位置

bootstrap的清除浮动

css如何设置table边框的颜色

浅谈bootstrap中的自适应屏幕

用npm下载bootstrap后怎么引入

bootstrap原理是什么

jquery easyui和bootstrap的区别是什么

bootstrap heading是什么意思

bootstrap框架有哪些缺点?

更多相关阅读请进入《bootstrap》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...