bootstrap-table的简要使用

bttable功能强大！同时支持申明方式和编程方式来使用！是wenzhixin主导开发一款开源的表格控件！

文档比较详尽，但要求初学者已经比较熟悉js，jquey等基本内容，否则可能许多代码无法阅读！

 

本文涉及的ｂｏｏｔｓｔｒａｐ－ｔａｂｌｅ版本为1.15.5，bootstrap版本4.3.1，jquery版本3.4.1

关于引入相关的css，js略！本文简要阐述两种使用方式。

一、申明式

申明式特点在于全部通过在　table标签开始区域设定各种选项，这些选项基本可以满足大部分的功能。

选项可以参考：https://bootstrap-table.com/docs/api/table-options/

<div class="query-content">
                <table id="table"
                    data-toggle="table"                                 
                    data-pagination=true
                    data-side-pagination= "server"
                    data-page-size=8
                    data-query-params="queryParam"
                    data-url="${pageContext.request.contextPath}/etl/dsconfig/getPage" 
                 >
                    <thead>
                        <tr>
                            <th data-field="dsname">数据源名称th>
                            <th data-field="dbtypename">类型th>
                            <th data-field="version">版本号th>
                            <th data-field="servername">服务器th>
                            <th data-field="dbport" data-width="60" data-width-unit="px" >端口th>
                            <th data-field="schemaname">模式(库)th>
                            <th data-field="dbuser">用户th>
                            <th data-field="dbpassword">密码th>
                            <th data-field="jdbcclassname">jdbc类名th>
                            <th data-filed="comments">备注th>
                            <th data-field="addtime">添加时间th>
                            <th data-field="lastoptime">最近修改时间th>
                            <th data-field="dsname"  data-width="180" data-width-unit="px" data-formatter="formatOperation">操作th>
                        tr>
                    thead>
                 table>
             div>   

列dsname所涉及到格式方法通过  data-formatter来定义，本文对应的格式化方法为 formatOperation,具体代码如下：

function formatOperation(value, row, index) {
        let statusTxt="";
        if (value=="系统数据库"){
            statusTxt=" disabled=true";
        }
        var res=
        '修改'+                
        '删除'+
        '测试';
        return res;
    }

查询参数如下：

function queryParam(params) {        
        var param = {
            offset: params.offset,
            limit: params.limit,
            sort: params.sort,
            order: params.order,
            page:(params.offset / params.limit) + 1,
            rows:params.limit,
            "dbtypename":$("#id_dbtypename").val(),
            "dsname":$("#id_dsname").val()
        };
    
        return param;
    }

注意：这个版本的bttable中，param参数是比较复杂，上文中定义的其实是完整参数的一部分（此类编程也只需要处理这一部分）。通过跟踪，可以了解params的全貌！

申明式：

          申明式本质上是bootsrap-table的js自动解析相关申明，之后再执行编程式方法，从而实现最终目的。

　　　优点：简单明了，开发速度快，代码好看；

　　　缺点：在document的onload中会自动被触发（可能有办法阻止，但暂时不知道如何处理)，有的时候，可能不希望页面加载的时候就执行查询！

 

二、编程式

如果喜欢写代码，也可以直接使用编程方式，编程式的主要工作包括：表格定义（定义表头，各种选项）。

详细的可以参考官网的说明,或者直接查看开发版本中代码(src/constants/index.js 中关于DEFAULTS的详细说明)。

以下列出两段代码：初始化，自定义ajax查询

1.初始化

$('#table').bootstrapTable({
        url: 'data/scores.json',        // 表格数据来源
        method: 'get', 
        pagination: true,
        pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
        pageSize: 5, 
        uniqueId: "id",
        columns: [
            {
                field: 'id',
                visible:false  //不显示            
            },
            {
                field: 'name',
                title: '姓名'
            }, {
                field: 'sex',
                title: '性别'
            }, {
                field: 'birthday',
                title: '出生日期'
            },{
                field: 'subjectname',
                title: '科目名称'
            },{
                field: 'scoredate',
                title: '考试日期' 
            },{
                field: 'score',
                title: '成绩',
                formatter: function (value, row, index) {
                    console.log(value);
                    var res="";
                    if (value>50){
                        res= '
'+value+'
';
                    }
                    else{
                        res= '
'+value+'
';
                    }
                    
                    return res;
                }            
            }
            ,{
                field: 'id',
                title: '操作',
                formatter: function (value, row, index) {
                    var res=';
                    console.log(res);
                    return res;
                }            
            }
        ]
    });

上文是相对简单的一个初始化。

2.自定义ajax请求（需要和申明“data-ajax”一起使用）

function ajaxRequestPage(params){
        $.ajax({
                url: "${pageContext.request.contextPath}/etl/dsconfig/getPage",
                type: "POST",
                dataType: "json",
                async:true,
                data:{

                    "page":(params.data.offset / params.data.limit) + 1,
                    "rows":params.data.limit,
                    "dbtypename":$("#id_dbtypename").val(),
                    "dsname":$("#id_dsname").val(),
                },
                success: function(rs,status, xhr){        
                    if (rs.flag==1){
                        params.success(
                            { //注意，必须返回参数 params
                                "total": rs.data.total,                            
                                "rows":  rs.data.rows
                            },
                            "ok", //这个好像暂时没有用到
                            xhr   //在1.15.5 版本中，这个是关键，如果没有返回则总是会报错！
                        );
                    }                                                
                    else{
                        alert(rs.msg);
                    }
                },
                error: function(jqXHR, textStatus, errorThrown){                    
                    $.alert({
                        title: '警告',
                        content: "查询数据源信息失败，网络错误:"+textStatus,
                        autoClose:'ok|500'
                    });
                    params.success(
                            { //注意，必须返回参数 params
                                "total": 0,                            
                                "rows":  8
                            },
                            "ok", //这个好像暂时没有用到
                            jqXHR //在1.15.5 版本中，这个是关键，如果没有返回则总是会报错！
                        );
                }
        });
    }

编程式：

　　　优点：一切尽在掌握中！

　　　缺点：代码量稍微多了一点，看起来没有那么优雅！

 

三、学习方法要点

1.首先要有js基础，了解类，变量定义，事件等等基础知识

2.熟悉jquery和ajax，尤其是ajax对象的基本属性和方法。

3.仔细阅读官方文档，对table option和column option逐个验证！