Bootstrap Table使用分享

版权声明:本文为博主原创文章,未经博主允许不得转载。

近年客户提出要求,想拿老的军事管制网,做生优化,通过手机为能够杀好表现,想到2单方案:

a方案:保留原的页面,新设计相同模拟副手机的页面,当手机看时,进入m.zhy.com(手机页面),pc设备看时,进入www.zhy.com(pc页面)

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

采用a方案,需要规划相同模仿界面,并且要得再勾副页面的接口,考虑到时刻及资金问题,故项目用了b方案

相同、效果亮

图片 1

次、BootStrap table简单介绍

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

老三、使用方式

1、引入js、css

<!--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来获取数据

<table data-toggle="table">
    <thead>
        ...
    </thead>
</table>

 …

$('#table').bootstrapTable({
          url: 'data.json' 
 });

 第二种植办法及第一种植而言在拍卖复杂数据常常越灵活,一般采用第二栽方式来进展table数据填。

$(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获取数据

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里面对应之措施获取数据

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

 4、分页(遇到题目最好多之)

利用分页,server端返回的数量要概括rows和total,代码如下:

...
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());       
...        

 5、分页界面内容介绍

图片 2

前者获取分页数据,代码如下:

...
oTableInit.queryParams = function (params) {
            var temp = {   //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
                limit: params.limit,   //第几条记录
                offset: params.offset,  //显示一页多少记录
                sdate: $("#stratTime").val(),

            };
            return temp;
        };
...

 后端获取分页数据,代码如下:

...
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;//第几页
...

 四、其他

Bootstrap3兼容IE8浏览器

 

相关文章