bootstrap中Table的操作方法有哪些-創(chuàng)新互聯(lián)

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

堅(jiān)守“ 做人真誠 · 做事靠譜 · 口碑至上 · 高效敬業(yè) ”的價(jià)值觀，專業(yè)網(wǎng)站建設(shè)服務(wù)10余年為成都成都汽車玻璃修復(fù)小微創(chuàng)業(yè)公司專業(yè)提供企業(yè)網(wǎng)站建設(shè)營銷網(wǎng)站建設(shè)商城網(wǎng)站建設(shè)手機(jī)網(wǎng)站建設(shè)小程序網(wǎng)站建設(shè)網(wǎng)站改版，從內(nèi)容策劃、視覺設(shè)計(jì)、底層架構(gòu)、網(wǎng)頁布局、功能開發(fā)迭代于一體的高端網(wǎng)站建設(shè)服務(wù)。

具體內(nèi)容如下

function HQCreatTable(ob) {
  var option = {
    cache: false,//是否使用緩存，默認(rèn)為true，所以一般情況下需要設(shè)置一下這個(gè)屬性（*）
    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,//是否啟用點(diǎn)擊選中行
    showRefresh: false, //顯示刷新按鈕
    //search: false,//是否顯示右上角的搜索框
    //toolbar: '#toolbar', //工具按鈕用哪個(gè)容器
    uniqueId: "ID", //每一行的唯一標(biāo)識(shí)，一般為主鍵列
    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)計(jì)頁腳
  }
  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 在點(diǎn)擊分頁按鈕或搜索按鈕時(shí)，將記住checkbox的選擇項(xiàng)
  }
  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ù)

 //行根據(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ù)的一個(gè)字段的值來改變行的背景色（class好像只能調(diào)用他本來默認(rèn)的那幾個(gè)，很久之前寫的忘記了是不是這樣的）

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

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

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

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

以上是“bootstrap中Table的操作方法有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前標(biāo)題：bootstrap中Table的操作方法有哪些-創(chuàng)新互聯(lián)
網(wǎng)址分享：http://m.jiaotiyi.com/article/eised.html