ブートストラップ テーブルの使用法 Sharing_html/css_WEB-ITnose

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

最近、お客様から独自の管理システムを最適化し、携帯電話でもうまく表示できるようにしたいという要望が寄せられています。

の 2 つのプランが思い浮かびます。プラン: 元のページを保持し、携帯電話でアクセスした場合は m.zhy.com (モバイル ページ)、PC デバイスでアクセスした場合は www.zhy.com (PC ページ) と入力します。

プラン b: ブートストラップ フレームワークを使用して元のページを置き換え、携帯電話、タブレット、PC デバイスに自動的に適応します

プラン a を使用すると、インターフェイスを設計し、インターフェイスを書き直す必要があります時間とコストの問題により、プロジェクトはプラン B を採用しました

1. エフェクトの表示

2. BootStrap テーブルの簡単な紹介

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

3. 使い方

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. テーブルのデータ埋め込み

bootStrap テーブルにデータを取得する方法は 2 つあります。テーブルの data-url 属性を使用してデータ ソースを指定します。2 つ目は、データを取得するために JavaScript を使用してテーブルを初期化するときに URL を指定する方法です

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

...

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

複雑なデータを処理する場合、2 番目の方法は最初の方法よりも優れており、一般に 2 番目の方法はテーブル データを埋めるために使用されます。

$(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. サーブレットでデータを取得します

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 コントローラーの対応するメソッドでデータを取得します

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

4. ページング (最も問題のあるもの)

ページングを使用する場合、サーバーから返されるデータには行と合計が含まれている必要があります。 コードは次のとおりです:

...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. ページング インターフェイスのコンテンツの紹介

フロントエンドはページング データを取得します。コードは次のとおりです。

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

4. その他

Bootstrap3 対応 IE8 ブラウザ