bootstrap Table的 一些小操作
阿新 • • 發佈:2017-11-01
cnblogs warning 在一起 classes 服務端 andro 設置 blog 根據
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值的總和,後端分頁的話則是當頁數據的總和。
bootstrap Table的 一些小操作