二次封裝bootstrap-table及功能優化


/**
 * 設置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/]

  

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM