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. Mysql初识数据库《四》mysql安装与基本管理

    一.MySQL介绍 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下公司.MySQL 最流行的关系型数据库管理系统,在 WEB 应用方面MySQL是 ...

  2. ajax-3验证

    $("#formBtn").click(function () { // var regName =/^[\u4e00-\u9fa5]{2,10}$/;//姓名只能是汉字切2-10 ...

  3. 移动端头部适配 meta基础知识

    meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...

  4. 【转】检索 COM 类工厂中 CLSID 为 {00024500-0000-0000-C000-000000000046} 的组件失败，原因是出现以下错误: 80070005 拒绝访问

    源地址:https://www.cnblogs.com/love522/p/4462253.html 最近在做一个网站时,有一个下载word文档功能,在本地直接调试是可以下载的,但部署到IIS上就出现 ...

  5. C# Winform 加载窗体/对象时的等待页面设计

    在设计应用程序过程中,有时候加载对象需时较长,我们可以显示一个Loading等待页面,对用户来说就比较友好了. 这个还是涉及到多线程,下面是步骤. 一.创建好Loading窗体: 一个Panel用于显 ...

  6. 题解 UVA10212 【The Last Non-zero Digit.】

    题目链接 这题在学长讲完之后和看完题解之后才明白函数怎么构造. 这题构造一个$f(n)$ $f(n)$ $=$ $n$除以 $2^{a}$ $*$ $5^{b}$ ,$a$ , $b$ 分别是 $n$ ...

  7. DATE类型数据在MySql中减一天的问题

    最近在开发一个教务管理系统,数据库中有教师表(Teacher).学生表(Student)等,其中属性:出生日期(Birthday)为DATE类型. 在执行更新教师操作时,发现未改动教师的出生日期但更新 ...

  8. 将form转为ajax提交的js代码

    参考网络代码基础上进行修改,调试通过. 在html中插入下面的代码: 函数ajaxSubmit是submit的ajax形式. 注意:这里面使用到了jquery库 //<!--将form中的值转换 ...

  9. Spring Eureka的使用入门--服务端与客户端

    接上篇: Eureka作为注册中心,连接服务端与客户端: 服务端: 依赖包: apply plugin: 'org.springframework.boot' apply plugin: 'io.sp ...

  10. 洛谷 P1477 [NOI2008]假面舞会

    题目链接 题目描述 一年一度的假面舞会又开始了,栋栋也兴致勃勃的参加了今年的舞会. 今年的面具都是主办方特别定制的.每个参加舞会的人都可以在入场时选择一 个自己喜欢的面具.每个面具都有一个编号,主办方 ...