收藏本站 收藏本站
積木網首頁 - 軟件測試 - 常用手冊 - 站長工具 - 技術社區
首頁 > JavaScript > JavaScript技巧 > 正文

首頁 - PHP - 數據庫 - 操作系統 - 游戲開發 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell編程 - DOS命令 - jQuery - CSS樣式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

bootstrap Table的一些小操作

本文實例為大家分享了bootstrap Table的操作代碼,供大家參考,具體內容如下

function HQCreatTable(ob) {
  var option = {
    cache: false,//是否使用緩存,默認為true,所以一般情況下需要設置一下這個屬性(*)
    scrollX: true,
    scrollY:true,
    striped: true,   //使表格帶有條紋 //是否顯示行間隔色
    sidePagination: "client",//分頁方式:client客戶端分頁,server服務端分頁(*)
    pagination: true,  //在表格底部顯示分頁工具欄
    pageNumber: 1,  //初始化加載第一頁,默認第一頁
    pageSize: 10,
    pageList: [ 10,15],//可供選擇的每頁的行數(*)
    showColumns: false,//是否顯示所有的列
    sortable: true, //是否啟用排序
    
    clickToSelect: true,//是否啟用點擊選中行
    showRefresh: false, //顯示刷新按鈕
    //search: false,//是否顯示右上角的搜索框
    //toolbar: '#toolbar', //工具按鈕用哪個容器
    uniqueId: "ID", //每一行的唯一標識,一般為主鍵列
    undefinedText: "",
    toolbarAlign: 'left',
    exportDataType: "all", //basic', 'all', 'selected'.
  }
  if (ob.rowStyle) {
    option.rowStyle = ob.rowStyle;//行樣式 是函數
  }
  //排序
  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;//導出Excel
  }
  if (ob.showFooter) {
    option.showFooter = ob.showFooter;//是否顯示統計頁腳
  }
  if (ob.searchAlign) {
    option.searchAlign = ob.searchAlign;
  }
  if (ob.num) {
    option.pageSize = ob.num;//每頁的記錄行數(*)
  }
  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;//設置為 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配置函數

<table id="Table3" data-row-style="rowStyle"></table>
 //行根據數據變色
  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
        };
      }
    }
    
  }

根據每行數據的一個字段的值來改變行的背景色(class好像只能調用他本來默認的那幾個,很久之前寫的忘記了是不是這樣的)

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

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

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

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

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持積木網。

JavaScript實現帶有子菜單和控件的slider輪播圖效果
大家或許做過(照片輪播)無限滾動圖片的項目,但是,如果使用普通的滾動,當到達最后一張時,便會滾動回第一張,這是一個非常不好的用戶體驗

ES7中利用Await減少回調嵌套的方法詳解
前言我們知道javascript是沒辦法阻塞的,所有的等待只能通過回調來完成,這就造成了回調嵌套的問題,導致代碼亂到爆,這時候Await就有用處了。對于aw

JS二分查找算法詳解
二分法查找,也稱折半查找,是一種在有序數組中查找特定元素的搜索算法。查找過程可以分為以下步驟:(1)首先,從有序數組的中間的元素開始搜

本周排行

更新排行

強悍的草根IT技術社區,這里應該有您想要的! 友情鏈接:b2b電子商務
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP備05050695號
36选7走势图大全 上海时时乐历史数据 山西11选5开奖效果图 中国期货配资证券网 甘肃快三开奖结果走势 贵州体彩11选五一定牛走势图 500彩票官网首页 化工股票推荐 彩票排列三APP 江苏十一选五走势图100期 湖北11选5选号技巧 幸运飞艇骗局 浙江体彩十一选五开 云南11先5开奖走势图 理财平台查询 亓和彩一肖公式 四川省快乐12开奖结果一定牛