/** * 設置bootstrat-table * @param params */ function setBootstrapTable (target, params) { // 默認設置表格內容居中 params.columns && params.columns.forEach(function (item) { if (!item.align) { item.align = 'center' } }) // 默認表格配置 var defaultParams = { data: params.data || '', // 默認數據為空 showColumns: params.showColumns ? params.showColumns : false, // 默認關閉可隱藏列 search: params.search ? params.search : false, // 默認關閉搜索 searchAlign: params.searchAlign ? params.searchAlign : 'left', // 默認搜索框靠左 searchOnEnterKey: params.searchOnEnterKey ? params.searchOnEnterKey : false, // 默認關閉回車搜索 searchText: params.searchText ? params.searchText : '', // 搜索框默認填充內容,默認為空 showToggle: params.showToggle ? params.showToggle : false, // 默認關閉切換展示方式按鈕 showExport: params.showExport ? params.showExport : false, // 是否打開下載, 默認關閉 exportDataType: params.exportDataType ? params.exportDataType : 'all', // 下載范圍 support: ‘basic’, ‘all’, ‘selected’. 默認all exportTypes: params.exportTypes ? params.exportTypes : ['csv','excel'], // 下載類型, support types: ‘json’, ‘xml’, ‘png’, ‘csv’, ‘txt’, ‘sql’, ‘doc’, ‘excel’, ‘xlsx’. 默認 ['csv','excel'] formatSearch: function () { // 搜索框默認提示 return params.formatSearch ? params.formatSearch : '在當前表格中搜索' }, formatNoMatches: function () { // 默認無數據展示內容 return params.formatNoMatches || '暫無數據' }, formatLoadingMessage: function () { // 默認loading內容 return params.formatLoadingMessage || '努力加載中...' }, formatColumns: function () { // 隱藏或顯示列按鈕的title, 默認為'顯示或隱藏列' return params.formatColumns ? params.formatColumns : '顯示或隱藏列' }, columns: params.columns || [] // 默認表頭內容為空 } // 將params中在默認表格配置中沒有的屬性,添加到默認表格配置中 for (var key in params) { if (!defaultParams.hasOwnProperty(key)) { defaultParams[key] = params[key] } } if (params.fixedHeader) { var clientHeight = $(target)[0].offsetParent.clientHeight var offsetTop = $(target)[0].offsetTop var tableHeight = clientHeight - offsetTop defaultParams.height = tableHeight } // bootstrap-table表格渲染方法調用 $(target).bootstrapTable(defaultParams) }
README.md
#### 表格組件,基於bootstrap-table --- ##### 使用方法 > html部分 ```html <table data-toggle="table" class="table table-bordered table-hover" id="your_table_id"> <thead class="thead-light"></thead> <tbody> <tr> <td>數據一</td> <td>數據二</td> </tr> </tbody> </table> ``` > javascript部分 ```javascript setBootstrapTable('#your_table_id', { data: data, // 表格數據,若是動態渲染的數據,則為必填項 formatNoMatches: '沒有數據', // 配置沒有數據顯示的文字,默認為'暫無數據' formatLoadingMessage: 'loading...', // 配置loading文字,默認為'努力加載中...' height: 500, // 設置表格高度從而來固定表頭 fixedHeader: true, // 自動計算表格在當前視圖中,去除上方元素后可用的高度,開啟這個配置則覆蓋默認的height屬性 search: false, // 搜索,默認關閉 searchAlign: 'left', // 默認搜索框靠左 searchOnEnterKey: false, // 默認關閉回車搜索 searchText: '', // 搜索框默認填充內容,默認為空 showColumns: false, // 默認關閉可隱藏列 showToggle: true, // 默認關閉切換展示方式按鈕 showExport: false, // 是否打開下載, 默認關閉 exportDataType: 'all', // 下載范圍 support: ‘basic’, ‘all’, ‘selected’. 默認all exportTypes: ['json', 'xml', 'csv', 'txt', 'sql', 'excel'], // 下載類型, support types: ‘json’, ‘xml’, ‘png’, ‘csv’, ‘txt’, ‘sql’, ‘doc’, ‘excel’, ‘xlsx’. 默認 ['csv', 'excel'] formatColumns: '顯示或隱藏列',// 隱藏或顯示列按鈕的title, 默認為'顯示或隱藏列' formatSearch: '在當前表格中搜索', // 搜索框內容,默認為'在當前表格中搜索' onAll: function (name, args) { // 所有事件觸發 // name: 觸發的事件名稱 // args: 觸發事件的數據 }, columns: [ // 在這里進行表頭設置 { title: '表頭一', width: '100%', // 自定義寬度 sortable: true, // 是否排序 align: 'left', // 'left','center','right' 默認居中 showColumns: true, // 是否開啟可隱藏列,默認開啟 formatter: function (data) { // 格式化數據 // 例如: return data + '%' 則為數據返回添加上%, // 如果數據需要%但是又要排序,則在此設置排序后的格式 } } ] }) ``` > 更多配置項請查看 [官方文檔][https://bootstrap-table.com/docs/api/table-options/]