Go语言视频零基础入门到精通

admin

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

复制代码

最近客户提出需求，想将原有的管理系统，做下优化，通过手机也能很好展现，想到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. <!--css样式-->
2. <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
3. <link href="css/bootstrap/bootstrap-table.css" rel="stylesheet">
4. <!--js-->
5. <script src="js/bootstrap/jquery-1.12.0.min.js" type="text/javascript"></script>
6. <script src="js/bootstrap/bootstrap.min.js"></script>
7. <script src="js/bootstrap/bootstrap-table.js"></script>
8. <script src="js/bootstrap/bootstrap-table-zh-CN.js"></script>

复制代码

2、table数据填充
bootStrap table获取数据有两种方式，一是通过table 的data-url属性指定数据源，二是通过javaScript初始化表格时指定url来获取数据

1. <table data-toggle="table">
2.     <thead>
3.         ...
4.     </thead>
5. </table>

复制代码

...

1. $("#table").bootstrapTable({
2.           url: "data.json"
3. });

复制代码

第二种方式交第一种而言在处理复杂数据时更为灵活，一般使用第二种方式来进行table数据填充。

1. $(function () {
3.             //1.初始化Table
4.             var oTable = new TableInit();
5.             oTable.Init();
7.             //2.初始化Button的点击事件
8.             /* var oButtonInit = new ButtonInit();
9.             oButtonInit.Init(); */
11.         });
14.         var TableInit = function () {
15.             var oTableInit = new Object();
16.             //初始化Table
17.             oTableInit.Init = function () {
18.                 $("#tradeList").bootstrapTable({
19.                     url: "/VenderManager/TradeList",         //请求后台的URL（*）
20.                     method: "post",                      //请求方式（*）
21.                     toolbar: "#toolbar",                //工具按钮用哪个容器
22.                     striped: true,                      //是否显示行间隔色
23.                     cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
24.                     pagination: true,                   //是否显示分页（*）
25.                     sortable: false,                     //是否启用排序
26.                     sortOrder: "asc",                   //排序方式
27.                     queryParams: oTableInit.queryParams,//传递参数（*）
28.                     sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
29.                     pageNumber:1,                       //初始化加载第一页，默认第一页
30.                     pageSize: 50,                       //每页的记录行数（*）
31.                     pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
32.                     strictSearch: true,
33.                     clickToSelect: true,                //是否启用点击选中行
34.                     height: 460,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
35.                     uniqueId: "id",                     //每一行的唯一标识，一般为主键列
36.                     cardView: false,                    //是否显示详细视图
37.                     detailView: false,                   //是否显示父子表
38.                     columns: [{
39.                         field: "id",
40.                         title: "序号"
41.                     }, {
42.                         field: "liushuiid",
43.                         title: "交易编号"
44.                     }, {
45.                         field: "orderid",
46.                         title: "订单号"
47.                     }, {
48.                         field: "receivetime",
49.                         title: "交易时间"
50.                     }, {
51.                         field: "price",
52.                         title: "金额"
53.                     }, {
54.                         field: "coin_credit",
55.                         title: "投入硬币"
56.                     },  {
57.                         field: "bill_credit",
58.                         title: "投入纸币"
59.                     },  {
60.                         field: "changes",
61.                         title: "找零"
62.                     }, {
63.                         field: "tradetype",
64.                         title: "交易类型"
65.                     },{
66.                         field: "goodmachineid",
67.                         title: "货机号"
68.                     },{
69.                         field: "inneridname",
70.                         title: "货道号"
71.                     },{
72.                         field: "goodsName",
73.                         title: "商品名称"
74.                     }, {
75.                         field: "changestatus",
76.                         title: "支付"
77.                     },{
78.                         field: "sendstatus",
79.                         title: "出货"
80.                     },]
81.                 });
82.             };
84.             //得到查询的参数
85.           oTableInit.queryParams = function (params) {
86.                 var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
87.                     limit: params.limit,   //页面大小
88.                     offset: params.offset,  //页码
89.                     sdate: $("#stratTime").val(),
90.                     edate: $("#endTime").val(),
91.                     sellerid: $("#sellerid").val(),
92.                     orderid: $("#orderid").val(),
93.                     CardNumber: $("#CardNumber").val(),
94.                     maxrows: params.limit,
95.                     pageindex:params.pageNumber,
96.                     portid: $("#portid").val(),
97.                     CardNumber: $("#CardNumber").val(),
98.                     tradetype:$("input:radio[name="tradetype"]:checked").val(),
99.                     success:$("input:radio[name="success"]:checked").val(),
100.                 };
101.                 return temp;
102.             };
103.             return oTableInit;
104.         };

复制代码

  
field字段必须与服务器端返回的字段对应才会显示出数据。
3、后台获取数据
    a、Servlet获取数据

1. BufferedReader bufr =  new BufferedReader(
2.         new InputStreamReader(request.getInputStream(),"UTF-8"));
3.         StringBuilder sBuilder = new StringBuilder("");
4.         String temp = "";
5.         while((temp = bufr.readLine()) != null){
6.                sBuilder.append(temp);
7.           }
8.         bufr.close();
9.         String json = sBuilder.toString();
10.         JSONObject json1 = JSONObject.fromObject(json);
11.         String sdate= json1.getString("sdate");//通过此方法获取前端数据
12.         ...

复制代码

   b、SpringMVC Controller里面对应的方法获取数据

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

复制代码

4、分页(遇到问题最多的)
使用分页，server端返回的数据必须包括rows和total，代码如下：

1. ...
2. gblst = SqlADO.getTradeList(sql,pageindex,maxrows);
3. JSONArray jsonData=new JSONArray();
4.                 JSONObject jo=null;
5.                 for (int i=0,len=gblst.size();i<len;i++)
6.                 {
7.                         TradeBean tb = gblst.get(i);
8.                         if(tb==null)
9.                         {
10.                                 continue;
11.                         }
12.                         jo=new JSONObject();
13.                         jo.put("id",  i+1);
14.                         jo.put("liushuiid", tb.getLiushuiid());
15.                         jo.put("price", String.format("%1.2f",tb.getPrice()/100.0));
16.                         jo.put("mobilephone", tb.getMobilephone());
17.                         jo.put("receivetime", ToolBox.getYMDHMS(tb.getReceivetime()));
18.                         jo.put("tradetype", clsConst.TRADE_TYPE_DES[tb.getTradetype()]);
19.                         jo.put("changestatus", (tb.getChangestatus()!=0)?"成功":"失败");
20.                         jo.put("sendstatus", (tb.getSendstatus()!=0)?"成功":"失败");
21.                         jo.put("bill_credit", String.format("%1.2f",tb.getBill_credit()/100.0));
22.                         jo.put("changes",String.format("%1.2f",tb.getChanges()/100.0));
23.                         jo.put("goodroadid", tb.getGoodroadid());
24.                         jo.put("SmsContent", tb.getSmsContent());
25.                         jo.put("orderid", tb.getOrderid());
26.                         jo.put("goodsName", tb.getGoodsName());
27.                         jo.put("inneridname", tb.getInneridname());
28.                         jo.put("xmlstr", tb.getXmlstr());
29.                        
30.                         jsonData.add(jo);
31.                 }
32.                 int TotalCount=SqlADO.getTradeRowsCount(sql);
33.                 JSONObject jsonObject=new JSONObject();
34.                 jsonObject.put("rows", jsonData);//JSONArray
35.                 jsonObject.put("total",TotalCount);//总记录数
36.                 out.print(jsonObject.toString());      
37. ...        

复制代码

5、分页界面内容介绍

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

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

复制代码

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

1. ...
2. int pageindex=0;
3. int offset = ToolBox.filterInt(json1.getString("offset"));
4. int limit = ToolBox.filterInt(json1.getString("limit"));       
5. if(offset !=0){
6.     pageindex = offset/limit;
7. }
8.     pageindex+= 1;//第几页
9. ...

复制代码

四、其他
Bootstrap3兼容IE8浏览器

大佬，可以分享一下源码吗

acbogeh

谢谢楼主的无私奉献。