Bootstrap table使用知识-转

时间  2019-11-25
标签 bootstrap table 使用 知识 栏目 Bootstarp 繁體版
原文   原文链接

http://www.cnblogs.com/landeanfen/p/5005367.htmljavascript

官方文档：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/css

最近客户提出需求，想将原有的管理系统，作下优化，经过手机也能很好展示，想到2个方案:html

a方案：保留原有的页面，新设计一套适合手机的页面，当手机访问时，进入m.zhy.com(手机页面)，pc设备访问时，进入www.zhy.com(pc页面)前端

b方案：采用bootstrap框架,替换原有页面，自动适应手机、平板、PC 设备java

采用a方案，须要设计一套界面，而且要得从新写适合页面的接口，考虑到时间及成本问题，故项目采用了b方案jquery

1、效果展现spring

2、BootStrap table简单介绍sql

1
bootStrap table 是一个轻量级的table插件，使用AJAX获取JSON格式的数据，其分页和数据填充很方便，支持国际化

3、使用方法json

一、引入js、cssbootstrap

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>

二、table数据填充

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

1
2
3
4
5
<table data-toggle= "table" >
     <thead>
         ...
     </thead>
</table>

 ...

1
2
3
$( '#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字段必须与服务器端返回的字段对应才会显示出数据。

三、后台获取数据

    a、servlet获取数据

1
2
3
4
5
6
7
8
9
10
11
12
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)
{
  ...
}

 四、分页(遇到问题最多的)

使用分页，server端返回的数据必须包括rows和total，代码以下：

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
...<br>gblst = SqlADO.getTradeList(sql,pageindex,maxrows);
JSONArray jsonData= new  JSONArray();
         JSONObject jo= null ;
         for  ( int  i= 0 ,len=gblst.size();i<len;i++)
         {
             TradeBean tb = gblst.get(i);
             if (tb== null )
             {
                 continue ;
             }
             jo= new  JSONObject();
             jo.put( "id" ,  i+ 1 );
             jo.put( "liushuiid" , tb.getLiushuiid());
             jo.put( "price" , String.format( "%1.2f" ,tb.getPrice()/ 100.0 ));
             jo.put( "mobilephone" , tb.getMobilephone());
             jo.put( "receivetime" , ToolBox.getYMDHMS(tb.getReceivetime()));
             jo.put( "tradetype" , clsConst.TRADE_TYPE_DES[tb.getTradetype()]);
             jo.put( "changestatus" , (tb.getChangestatus()!= 0 )? "成功" : "失败" );
             jo.put( "sendstatus" , (tb.getSendstatus()!= 0 )? "成功" : "失败" );
             jo.put( "bill_credit" , String.format( "%1.2f" ,tb.getBill_credit()/ 100.0 ));
                         jo.put( "changes" ,String.format( "%1.2f" ,tb.getChanges()/ 100.0 ));
             jo.put( "goodroadid" , tb.getGoodroadid());
             jo.put( "SmsContent" , tb.getSmsContent());
             jo.put( "orderid" , tb.getOrderid());
             jo.put( "goodsName" , tb.getGoodsName());
             jo.put( "inneridname" , tb.getInneridname());
             jo.put( "xmlstr" , tb.getXmlstr());
             
             jsonData.add(jo);
         }
         int  TotalCount=SqlADO.getTradeRowsCount(sql);
         JSONObject jsonObject= new  JSONObject();
         jsonObject.put( "rows" , jsonData); //JSONArray
         jsonObject.put( "total" ,TotalCount); //总记录数
         out.print(jsonObject.toString());       <br>...       

 五、分页界面内容介绍

前端获取分页数据，代码以下：

1
2
3
4
5
6
7
8
9
...<br>oTableInit.queryParams = function (params) {
             var temp = {    //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也须要改为同样的
                 limit: params.limit,    //第几条记录
                 offset: params.offset,   //显示一页多少记录
                 sdate: $( "#stratTime" ).val(),
 
             };
             return  temp;
         };<br>...

 后端获取分页数据,代码以下：

1
2
3
4
5
6
7
...<br> int  pageindex= 0 ;
int  offset = ToolBox.filterInt(json1.getString( "offset" ));
int  limit = ToolBox.filterInt(json1.getString( "limit" ));   
if (offset != 0 ){
     pageindex = offset/limit;
}
     pageindex+=  1 ; //第几页<br>...

 

 

最近客户提出需求，想将原有的管理系统，作下优化，经过手机也能很好展示，想到2个方案:

a方案：保留原有的页面，新设计一套适合手机的页面，当手机访问时，进入m.zhy.com(手机页面)，pc设备访问时，进入www.zhy.com(pc页面)

b方案：采用bootstrap框架,替换原有页面，自动适应手机、平板、PC 设备

采用a方案，须要设计一套界面，而且要得从新写适合页面的接口，考虑到时间及成本问题，故项目采用了b方案

1、效果展现

2、BootStrap table简单介绍

1
bootStrap table 是一个轻量级的table插件，使用AJAX获取JSON格式的数据，其分页和数据填充很方便，支持国际化

3、使用方法

一、引入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>

二、table数据填充

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

1
2
3
4
5
<table data-toggle= "table" >
     <thead>
         ...
     </thead>
</table>

 ...

1
2
3
$( '#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
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程