欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

JS组件Bootstrap Table使用方法详解_javascript技巧

程序员文章站 2022-04-04 10:43:02
...
最近客户提出需求,想将原有的管理系统,做下优化,通过手机也能很好展现,想到2个方案:

a方案:保留原有的页面,新设计一套适合手机的页面,当手机访问时,进入m.zhy.com(手机页面),pc设备访问时,进入www.zhy.com(pc页面)

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

采用a方案,需要设计一套界面,并且要得重新写适合页面的接口,考虑到时间及成本问题,故项目采用了b方案

一、效果展示

JS组件Bootstrap Table使用方法详解_javascript技巧

二、BootStrap table简单介绍

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

1、引入js、css


2、table数据填充

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



    ...
  
...

$('#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...

5、分页界面内容介绍

JS组件Bootstrap Table使用方法详解_javascript技巧

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

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

以上就是为大家分享的Bootstrap Table使用方法,希望对大家熟练掌握Bootstrap Table使用方法有所帮助。