bootstrap中Table的操作方法有哪些

這篇文章主要介紹bootstrap中Table的操作方法有哪些，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

具體內(nèi)容如下

function HQCreatTable(ob) {
  var option = {
    cache: false,//是否使用緩存，默認(rèn)為true，所以一般情況下需要設(shè)置一下這個屬性（*）
    scrollX: true,
    scrollY:true,
    striped: true,   //使表格帶有條紋 //是否顯示行間隔色
    sidePagination: "client",//分頁方式：client客戶端分頁，server服務(wù)端分頁（*）
    pagination: true,  //在表格底部顯示分頁工具欄
    pageNumber: 1,  //初始化加載第一頁，默認(rèn)第一頁
    pageSize: 10,
    pageList: [ 10,15],//可供選擇的每頁的行數(shù)（*）
    showColumns: false,//是否顯示所有的列
    sortable: true, //是否啟用排序
    
    clickToSelect: true,//是否啟用點擊選中行
    showRefresh: false, //顯示刷新按鈕
    //search: false,//是否顯示右上角的搜索框
    //toolbar: '#toolbar', //工具按鈕用哪個容器
    uniqueId: "ID", //每一行的唯一標(biāo)識，一般為主鍵列
    undefinedText: "",
    toolbarAlign: 'left',
    exportDataType: "all", //basic', 'all', 'selected'.
  }
  if (ob.rowStyle) {
    option.rowStyle = ob.rowStyle;//行樣式 是函數(shù)
  }
  //排序
  if (ob.sortOrder) {
    option.sortOrder = ob.sortOrder;
  } else {
    option.sortOrder = "desc";
  }
  if (ob.sortName) {
    option.sortName = ob.sortName;
  }
  if (ob.showExport) {
    option.showExport = ob.showExport;//導(dǎo)出Excel
  }
  if (ob.showFooter) {
    option.showFooter = ob.showFooter;//是否顯示統(tǒng)計頁腳
  }
  if (ob.searchAlign) {
    option.searchAlign = ob.searchAlign;
  }
  if (ob.num) {
    option.pageSize = ob.num;//每頁的記錄行數(shù)（*）
  }
  if (ob.data) {
    option.data = ob.data;
  } else {
    option.data = [];
  }
  if (ob.search) {
    option.search = ob.search;
  }
  if (ob.columns) {
    option.columns = ob.columns;
  }
  if (ob.onClickRow) {
    option.onClickRow = ob.onClickRow;
  }
  if (ob.onDblClickRow) {
    option.onDblClickRow = ob.onDblClickRow;
  }
  if (ob.onDblClickRow) {
    option.onDblClickRow = ob.onDblClickRow;
  }
  if (ob.onCheck) {
    option.onCheck = ob.onCheck;
  }
  if (ob.onAll) {
    option.onAll = ob.onAll;
  }
  if (ob.onLoadSuccess) {
    option.onLoadSuccess = ob.onLoadSuccess;
  }
  if (ob.toolbar) {
    option.toolbar = ob.toolbar;
  }
  if (ob.singleSelect || ob.singleSelect == false) {
    option.singleSelect = ob.singleSelect
  } else {
    option.singleSelect = true;//禁止多選
  }
  if (ob.maintainSelected) {
    option.maintainSelected = ob.maintainSelected;
  } else {
    option.maintainSelected = false;//設(shè)置為 true 在點擊分頁按鈕或搜索按鈕時，將記住checkbox的選擇項
  }
  if (ob.detailView) { option.detailView = ob.detailView; }
  if (ob.onExpandRow) {
    option.onExpandRow = ob.onExpandRow;
  }
  if (ob.onEditableSave) {
    option.onEditableSave = ob.onEditableSave;
  }
  $(ob.id).bootstrapTable('destroy');
  $(ob.id).bootstrapTable(option);
  if (ob.data) {
    $(ob.id).bootstrapTable('load', ob.data);
  }
}

前端分頁的Table配置函數(shù)

<table id="Table3" data-row-></table>
 //行根據(jù)數(shù)據(jù)變色
  function rowStyle(row, index) {
    var classes = ['success'];
    var classes1 = ['danger'];
    var classes2 = ['warning'];
    if (row.bed_msg==0) {
      return {
        classes: classes2
      };
    }else{
      if (row.status == 1) {
        return {
          classes: classes1
        };
      } else {
          return {
        classes: classes
        };
      }
    }
    
  }

根據(jù)每行數(shù)據(jù)的一個字段的值來改變行的背景色（class好像只能調(diào)用他本來默認(rèn)的那幾個，很久之前寫的忘記了是不是這樣的）

formatter: function (value, row, index) {
          // 根據(jù)row.列名  那狀態(tài)確定返回 true/false
          if (row.status == 1) {
            return {
              disabled: true
            };
          }
          
        }

這個是根據(jù)每行數(shù)據(jù)的一個字段的值來是否禁用選擇框（我在之前項目需要做結(jié)算，已結(jié)算的和未結(jié)算的在一起，因此需要這個），formatter還可以寫別的函數(shù)，比如根據(jù)1，0值改成其對應(yīng)的值

footerFormatter: function (data) {
             return data.reduce(function (sum, row) {
               return accAdd(sum, row["Selmoney"]);
             }, 0) + "元";
           }

footerFormatter是必須之前的配置Table時，showFooter屬性為true，否則不會顯示。我寫這個是前端分頁的話是Table所有數(shù)據(jù)的Selmoney值的總和，后端分頁的話則是當(dāng)頁數(shù)據(jù)的總和。

以上是“bootstrap中Table的操作方法有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！