当前位置 : 主页 > 手机开发 > 其它 >

二次封装bootstrap-table及功能优化

来源:互联网 收集:自由互联 发布时间:2021-06-19
/** * 设置bootstrat-table * @param params */function setBootstrapTable (target, params) { // 默认设置表格内容居中 params.columns params.columns.forEach(function (item) { if (!item.align) { item.align = ‘center‘ } }) // 默认表
/**
 * 设置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/]
网友评论