bootstrap-table 应用遇到的坑

介绍

最近写了一个 请求什么，返回什么 的工具，前端用到了 bootstrap-table 这个组件，顺便把相应的参数含义做一个总结。

代码介绍

省略...
 <table id="table">
     <thead>
     <tr>
         <th data-field="id">id</th>
         <th data-field="queryid">calid</th>
         <th data-field="requesttime" data-sortable="true">requesttime</th>
     </tr>
     </thead>
 </table>

<script>
    var ip = '144.34.199.31';
    var rootpath = '/callback'

    $('#table').bootstrapTable({
        height: 800,  // 表格高度
        pageSize: 20,  // 默认每页大小
        pageList: [20, 30, 50, 100],  // 页面大小选择
        pagination: true,  // 是否分页
        search: true,  // 是否开启搜索
        showRefresh: true,  // 是否显示刷新按钮。
        showColumns: true,  // 是否显示列显示
        showPaginationSwitch: true,  // 分页切换开关
        showToggle: true,  // 是否显示切换视图（table/card）按钮。
        showFullscreen: true,
        detailView: true,  // 显示详情
        searchAlign: 'left',
        buttonsAlign: 'left', // 指定 按钮栏 水平方向的位置。
        sidePagination: 'server',  // 分页在 服务端
        url: 'getallrequest',  // 请求数据路径
        queryParams: queryParams,  // 请求分页数据参数
        detailFormatter: detailFormatter,  // 详情页格式
        responseHandler: responseHandler,  // 请求数据返回时触发
        rowStyle: rowStyle,  // 每一行样式
        onClickRow: onClickRow,  // 行点击事件
        onLoadSuccess:onLoadSuccess  // 页面加载成功事件
    });

    // 从服务加载的数据进行处理
    function responseHandler(res) {
        console.log(res)  // 进行一些操作
        return res;  // 写了这个函数 就一定要返回，否则无法加载数据  https://segmentfault.com/q/1010000009168739
    }
    

    // 行点击事件，点击时循环关闭或打开视图
    function onClickRow(row, $element,field) {
        // https://stackoverflow.com/questions/37133505/how-does-click-cell-bs-table-works
        if($element.next().is('tr.detail-view')){
            $('#table').bootstrapTable('collapseRow',$element.data('index'));
        }else {
            $('#table').bootstrapTable('expandRow',$element.data('index'));
        }

    }

    function onLoadSuccess(data){
        console.log(data)
    }


    // 具体详情页视图
    function detailFormatter(index, row) {
        var html = [];
        $.each(row, function (key, value) {
            if (key == 'request') {
                // var result = JSON.stringify(value, null, 2);
                html.push('<div><pre>'+JsonFormat(value)+'</pre></div>');
            }
        });
        return html.join('');
    }

    // 表格行样式，隔行变色
    function rowStyle(row, index) {
        console.log(index+','+index%4);
        var classes = ['active', 'success', 'info', 'warning', 'danger'];
        return {
            classes: classes[index % 5]
        };

    }

    // HTTP 请求的分页参数，服务器将接收到 search sort order offset limit 参数
    function queryParams(params) {
        return {
            search: params.search,
            sort: params.sort,
            order: params.order,
            offset: params.offset,
            limit: params.limit
        };
    }

    // 服务器返回 JSON 字符串，格式化输出
    function JsonFormat(json) {
        if (typeof json != 'string') {
            json = JSON.stringify(json, undefined, 2);
        }
        json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
        return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
            var cls = 'number';
            if (/^"/.test(match)) {
                if (/:$/.test(match)) {
                    cls = 'key';
                } else {
                    cls = 'string';
                }
            } else if (/true|false/.test(match)) {
                cls = 'boolean';
            } else if (/null/.test(match)) {
                cls = 'null';
            }
            return '<span class="' + cls + '">' + match + '</span>';
        });
    }

    // 随机参数参数按钮
    function btn_random() {
        var temp = randomString(Math.floor(Math.random()*32));
        $('#calidinput').val(temp);
        $('#requestinput').val('http://'+ip+rootpath+'/request?calid='+temp);
    }

    // 获取指定长度的字符串
    function randomString(len) {
        len = len || 32;
        var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
        /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
        var maxPos = $chars.length;
        var pwd = '';
        for (i = 0; i < len; i++) {
            pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
        }
        return pwd;
    }


</script>
</body>
</html>

注意点

1. 版本问题
   现在 bootstrap-table 版本是 v1.12.2，引用的 jquery.js 是 jquery-3.1.1.min.js，3.2.0 的 bootstrap.min.js，最新 bootstrap 4.0 部分组件不兼容，注意版本，否则有些功能无感正常使用。

2. 分页
   分页有客户端、服务端两种形式，客户端一次请求所有数据，分页操作 js 自己完成，适用于数据量小的场合；服务端模式，由服务端按照参数请求格式返回相应的 JSON 结果。

   • 请求服务器调用的参数：http://localhost/callback/getallrequest?search=&order=asc&offset=0&limit=20
   • 服务器返回：函数 queryParams() 就是向服务端传递 search、sort、offset、limit 等参数。服务端返回结果，数据中必须包含 total，否则前端不会显示，提示 “没有找到匹配的记录”。
   • 当 search 为空时，total 表示所有数据的总条数；当 search 不为空时，total 表示模糊匹配 search 的结果条数。参数 offset、limit 只是对相应的结果进行控制。
     

3. 获取行索引
   点击某一行时，触发 onClickRow(row, $element,field) 事件，row 保存的是这一行的数据信息，field 表示点击的哪一列。
   a. 获取点击的当前行索引：

   $element.data('index')
   

   b. 展开当前行：

   $('#table').bootstrapTable('expandRow',$element.data('index'));
   

总结

前端框架太多不会，现在先学会用，把东西先做出来，给自己一个正向的反馈，这样才有信心继续下去！