【Bootstrap】JS组件Bootstrap Table使用方法详解-Table使用方法-Bootstrap-Table使用

$(function () {
 
    //1.初始化Table
    var oTable=new TableInit();
    oTable.Init();
 
    //2.初始化Button的点击事件
    
 
  });
 
 
  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;
  };
 

关于JS组件Bootstrap Table使用方法详解的用户互动如下：

　　相关问题：如何在ReactJs中使用Bootstrap

　　答：bootstrap是不提供 输入框 提示功能 的JS插件，一直到到现在的v3都不提供。 但是他提供模态窗、下拉菜单等JS插件，具体的可以到官方网站查看，在网站顶部有个页签“javascript”就是JS插件了。 bootstrap所有的JS插件都是jQuery插件，提供两种接口... >>详细

　　相关问题：如何使用Bootstrap快速开发Web前端

　　答：如何使用Bootstrap针对 Bootstrap 的 HTML清单 • 是一个有用的框架 HTML 文件，用于结合使用 Bootstrap 与一个固定布局和响应特性：清单 • 用于 Bootstrap 项目的基本框架 HTML 文件 (listing1.html) 在 Bootstrap 下载中，请注意，... >>详细

　　相关问题：bootstrap table checkbox单选

　　答： bootstrap-table-all.js源码里面可配置,225行大概,singleSelect设置为true即可 >>详细