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

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

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

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

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

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

一、效果展示

二、BootStrap table简单介绍

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

三、使用方法

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

3、后台获取数据

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)
{
 ...
}

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

使用分页，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>...       

5、分页界面内容介绍

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

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方案

一、效果展示

二、BootStrap table简单介绍

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

三、使用方法

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

3、后台获取数据

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)
{
 ...
}

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

使用分页，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>...       

5、分页界面内容介绍

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

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>...

Bootstrap table使用知识-转的更多相关文章

  1. JS组件系列——Bootstrap Table 表格行拖拽

    前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到 ...

  2. bootstrap table使用参考

    https://www.cnblogs.com/landeanfen/p/5821192.html  转载 阅读目录 一.x-editable组件介绍 二.bootstrapTable行内编辑初始方案 ...

  3. BootStrap table使用

    bootstrap table git address https://github.com/wenzhixin/bootstrap-table 引入文件 <link rel="sty ...

  4. bootstrap Table 中给某一特定值设置table选中

    bootstrap Table 中给某一特定值设置table选中 需求: 如图所示:左边地图人员选定,右边表格相应选中. 功能代码: //表格和图标联动 function changeTableSel ...

  5. JS组件系列——表格组件神器：bootstrap table

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  6. JS组件系列——表格组件神器：bootstrap table（二：父子表和行列调序）

    前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...

  7. JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利）

    前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

  8. JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

    前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...

  9. JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）

    前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...

随机推荐

  1. C#静态类 静态方法与非静态方法比较

    静态类 在类(class)上加入static修饰,表示该类无法被实例化,并将该类中,无法实例化变量或函数 静态类的主要特性 仅包含静态成员 无法实例化 静态类的本质,时一个抽象的密封类,所以不能被继承 ...

  2. 分享我访问google的方法

    对于程序员来说,有很多技术问题还是通过互联网搜索来解决的.所以百度.google对于我们是多少的重要.但是GOOGLE现在无法访问了.怎么办呢.以下是我访问google的方法. 首先自己制作了一个简单 ...

  3. Socket 简易静态服务器 WPF MVVM模式（一）

    整体代码下载 主要实现功能: Socket的简单应用 可修改IP和端口 显示来访信息 界面设计: 界面采用MVVM设计,很简陋. 前台的主要目的是 输入IP地址 输入端口 输入文件目录 开启监听和停止 ...

  4. Kubernetes -- Server 部署

    1.  Node 节点配置文件 1.1 下载相关的软件 wget https://dl.k8s.io/v1.13.1/kubernetes-server-linux-amd64.tar.gz wget ...

  5. java学习笔记之位运算符

    java的位运算符主要针对二进制数的位进行逻辑运算,主要包括以下几种的位运算符 1.与运算符(&) 与运算符的使用规律是两个操作数中位为1的时候结果为1,否则都是0,例如  3&5=1 ...

  6. js 原生JS实现轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. python基础02—运算符与流程控制

    运算符与流程控制 运算符 赋值运算 用'='表示,'='的左边只能是变量 算术运算 +.-.*:加.减.乘 /:除法运算,运算结果为浮点数 //:除法运算,运算结果为整数(商) %:求余 **:求幂 ...

  8. springMVC上传功能(单文件和多文件上传)

    单文件和多文件上传 首先在xxx-select.xml里面配置上传的大小和编码 <bean id="multipartResolver" class="org.sp ...

  9. artDialog不能拖拽的问题

    需要引用下面这个文件: https://github.com/aui/artDialog/edit/master/dist/dialog-plus.js

  10. POJ - 3261 后缀数组 height应用

    题意:求最少重叠\(k\)次的重复子串的最大长度 子串长度问题依然是二分枚举,可以观察出重叠的一定是sa排序中连续的 之前想出一种判断要\(n^2\)的方法,没有考虑到后面肯定会连续出现的情况 (大概 ...