1. 程式人生 > >bootstrap-table的一些配置引數例子

bootstrap-table的一些配置引數例子

bootstrap-table的一些配置引數

$('#reportTable').bootstrapTable({
  method: 'post',
  url: '/qStock/AjaxPage',
  dataType: "json",
  striped: true,	 //使表格帶有條紋
  pagination: true,	//在表格底部顯示分頁工具欄
  pageSize: 22,
  pageNumber: 1,
  pageList: [10, 20, 50, 100, 200, 500],
  idField: "ProductId",  //標識哪個欄位為id主鍵
  showToggle: false,   //名片格式
  cardView: false,//設定為True時顯示名片(card)佈局
  showColumns: true, //顯示隱藏列  
  showRefresh: true,  //顯示重新整理按鈕
  singleSelect: true,//複選框只能選擇一條記錄
  search: false,//是否顯示右上角的搜尋框
  clickToSelect: true,//點選行即可選中單選/複選框
  sidePagination: "server",//表格分頁的位置
  queryParams: queryParams, //引數
  queryParamsType: "limit", //引數格式,傳送標準的RESTFul型別的引數請求
  toolbar: "#toolbar", //設定工具欄的Id或者class
  columns: column, //列
  silent: true,  //重新整理事件必須設定
  formatLoadingMessage: function () {
    return "請稍等,正在載入中...";
  },
  formatNoMatches: function () {  //沒有匹配的結果
    return '無符合條件的記錄';
  },
  onLoadError: function (data) {
    $('#reportTable').bootstrapTable('removeAll');
  },
  onClickRow: function (row) {
    window.location.href = "/qStock/qProInfo/" + row.ProductId;
  },
});


bootstrap-table帶參到後臺去的程式碼

function queryParams(params) {  //配置引數
    var temp = {   //這裡的鍵的名字和控制器的變數名必須一直,這邊改動,控制器也需要改成一樣的
      pageSize: params.limit,   //頁面大小
      pageNumber: params.pageNumber,  //頁碼
      minSize: $("#leftLabel").val(),
      maxSize: $("#rightLabel").val(),
      minPrice: $("#priceleftLabel").val(),
      maxPrice: $("#pricerightLabel").val(),
      Cut: Cut,
      Color: Color,
      Clarity: Clarity,
      sort: params.sort,  //排序列名
      sortOrder: params.order//排位命令(desc,asc)
    };
    return temp;
  }