JSコンポーネントの使い方を詳しく解説 Bootstrap Table_javascriptスキル

最近、お客様からオリジナルの管理システムを最適化して携帯電話でも適切に表示できるようにしたいという要望があり、次の 2 つの解決策が思い浮かびます。

プラン a: 元のページを保持し、携帯電話でアクセスする場合は、「m.zhy.com」と入力します (モバイル ページ)。PC デバイスでアクセスする場合は、「www.zhy」と入力します。 com（PCページ）

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

オプション a を採用する場合、インターフェイスを設計し、ページに適したインターフェイスを書き直す必要があります。時間とコストの問題を考慮して、プロジェクトはオプション b を採用します。

1.エフェクト表示

2. BootStrap テーブルの概要

bootStrap テーブルは、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 つの方法があります。1 つはテーブルの data-url 属性でデータ ソースを指定する方法で、もう 1 つは JavaScript でテーブルを初期化するときに URL を指定してデータを取得する方法です。 🎜>

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

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

2 番目の方法は、複雑なデータを処理する場合、1 番目の方法よりも柔軟です。一般に、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. ページネーション (最も問題のあるページネーション)

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

...<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)&#63;"成功":"失败");
      jo.put("sendstatus", (tb.getSendstatus()!=0)&#63;"成功":"失败");
      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. ページングインターフェースのコンテンツの紹介

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

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

バックエンドはページング データを取得します。コードは次のとおりです:

...<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 の使い方を皆さんに共有したもので、皆さんが Bootstrap Table を使いこなすのに役立つことを願っています。