• 二次封装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: '表头一',
                     '100%', // 自定义宽度
                    sortable: true, // 是否排序
                    align: 'left', // 'left','center','right' 默认居中
                    showColumns: true, // 是否开启可隐藏列,默认开启
                    formatter: function (data) { // 格式化数据
                       // 例如: return data + '%' 则为数据返回添加上%,
                       // 如果数据需要%但是又要排序,则在此设置排序后的格式
                    }
                }
            ]
        })
    ```
    > 更多配置项请查看 [官方文档][https://bootstrap-table.com/docs/api/table-options/]
    

      

      

  • 相关阅读:
    1.BMap(百度地图)第二次加载显示不全
    SpringMVC的拦截器
    装饰者模式
    java产生随机数
    VS 常用快捷键
    给包含compid列且值为null ,表的行数据赋值--
    遍历数据库,删除包含指定列的表的行数据-
    DataTable select根据条件取值
    临时表汇总金额
    Redirect url 路径简单介绍
  • 原文地址:https://www.cnblogs.com/Man-Dream-Necessary/p/10778014.html
Copyright © 2020-2023  润新知