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. delegate Func Action Expression

    using System; using System.Collections.Generic; using System.Linq; using System.Linq.Expressions; na ...

  2. OO 抽象类与接口的区别

    抽象类与接口的区别 抽象类与接口的区别 一.抽象类:(抽象类适用于同一系列,并且有需要继承的成员) 概念: 1.使用abstract修饰: 2.抽象类中可以包含抽象方法: 3.抽象类只能被子类继承:( ...

  3. MVC进阶篇（四）——[HttpGet]和[HttpPost]

    前言 Get和post,一个获取请求,一个提交请求,在MVC里面用法也很特别,总结一下,我理解的不是特别深刻,希望多多交流. 内容 [HttpGet] 需求: 用户想要通过点击修改按钮来达到修改这部分 ...

  4. loj #2255. 「SNOI2017」炸弹

    #2255. 「SNOI2017」炸弹 题目描述 在一条直线上有 NNN 个炸弹,每个炸弹的坐标是 XiX_iX​i​​,爆炸半径是 RiR_iR​i​​,当一个炸弹爆炸时,如果另一个炸弹所在位置 X ...

  5. oracle知识总结

    Oracle 分页案例: SELECT * FROM(SELECT A.*, ROWNUM RN FROM (SELECT * FROM Table_name) AWHERE ROWNUM <= ...

  6. 2.1、Softmax Regression模型

    Softmax Regression模型 由于Logistics Regression算法复杂度低,容易实现等特点,在工业中的到广泛的使用,但是Logistics Regression算法主要用于处理 ...

  7. WebStorm ES6 语法支持设置和ES6语法的JS文件编译为ES5语法文件

    ECMAScript 6是JavaScript语言的下一代标准,已经在2015年6月正式发布了.Mozilla公司将在这个标准的基础上,推出JavaScript 2.0.ES6的目标,是使得JavaS ...

  8. [Python]打印a..z的字符

    import string print string.letters[0:26]

  9. Android 系统特有的类介绍及使用

    1.Content类 在应用程序中Context的具体实现子类就是:Activity,Service,Application.可以把它理解成存储东西的仓库. 常用的上下文一般是类名.class或类名. ...

  10. 打开页面时就提交，可以做一些自动登陆 还有SICLOGIN的测试代码

      <HTML> <head> <title> Untitled Document</title > (1)自动提交表单: <meta http- ...