快捷導(dǎo)航

bootstrap Table的一些小操作

更新時(shí)間：2017年11月01日 08:35:38 作者：tzzf

這篇文章主要為大家詳細(xì)介紹了bootstrap Table的一些小操作，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了bootstrap Table的操作代碼，供大家參考，具體內(nèi)容如下

function HQCreatTable(ob) {
  var option = {
    cache: false,//是否使用緩存，默認(rèn)為true，所以一般情況下需要設(shè)置一下這個(gè)屬性（*）
    scrollX: true,
    scrollY:true,
    striped: true,   //使表格帶有條紋 //是否顯示行間隔色
    sidePagination: "client",//分頁(yè)方式：client客戶(hù)端分頁(yè)，server服務(wù)端分頁(yè)（*）
    pagination: true,  //在表格底部顯示分頁(yè)工具欄
    pageNumber: 1,  //初始化加載第一頁(yè)，默認(rèn)第一頁(yè)
    pageSize: 10,
    pageList: [ 10,15],//可供選擇的每頁(yè)的行數(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ì)頁(yè)腳
  }
  if (ob.searchAlign) {
    option.searchAlign = ob.searchAlign;
  }
  if (ob.num) {
    option.pageSize = ob.num;//每頁(yè)的記錄行數(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)擊分頁(yè)按鈕或搜索按鈕時(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);
  }
}

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

<table id="Table3" data-row-style="rowStyle"></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ù)的一個(gè)字段的值來(lái)改變行的背景色（class好像只能調(diào)用他本來(lái)默認(rèn)的那幾個(gè)，很久之前寫(xiě)的忘記了是不是這樣的）

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

這個(gè)是根據(jù)每行數(shù)據(jù)的一個(gè)字段的值來(lái)是否禁用選擇框（我在之前項(xiàng)目需要做結(jié)算，已結(jié)算的和未結(jié)算的在一起，因此需要這個(gè)），formatter還可以寫(xiě)別的函數(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ì)顯示。我寫(xiě)這個(gè)是前端分頁(yè)的話(huà)是Table所有數(shù)據(jù)的Selmoney值的總和，后端分頁(yè)的話(huà)則是當(dāng)頁(yè)數(shù)據(jù)的總和。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: