Brief use of bootstrap-table

bttable powerful! Supports and affirms way to programmatically use! Wenzhixin is leading the development of an open source Grid control!

More detailed documentation, but requires beginners are already familiar with the basic content js, jquey, as this may not be a lot of code to read!

 

It referred to herein bootstrap-table version 1.15.5, bootstrap version 4.3.1, jquery version 3.4.1

On the introduction of relevant css, js slightly! This article briefly describes two ways.

First, declarative

Declarative characterized by setting all the various options in the table area to start the label, these options meet the most basic functions.

Options can refer to: 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>   

Column formats involved dsname method defined by data-formatter, formatting methods described herein for the corresponding formatOperation , specific code as follows:

function formatOperation(value, row, index) {
        let statusTxt="";
        if (value=="系统数据库"){
            statusTxt=" disabled=true";
        }
        var res=
        '<button  name="btn_update" class="btn btn-primary  btn-sm  "  '+statusTxt+'  onclick="fnUpdateClick(\''+row.dsname+'\')">修改</button>'+                
        '<button  name="btn_delete" class="btn  btn-warning  btn-sm  " '+statusTxt+'    onclick="fnDelClick(\''+row.dsname+'\')">删除</button>'+
        '<button  name="btn_test" class="btn btn-success  btn-sm " onclick="fnTestClick(\''+row.dsname+'\')">测试</button>';
        return res;
    }

Query parameters are as follows:

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;
    }

Note : This version of bttable in, param argument is more complex, as defined above are in fact part of a complete parameter (such programming only need to deal with this part). By tracking, you can understand the whole picture of params!

Declarative :

          Bootsrap-table is the declarative nature js automatically parse relevant affirmed, and then after performing programming approach, in order to achieve the ultimate goal.

　　　Advantages : simple, fast development speed, code Attractive;

　　　Drawback : in the onload document will be triggered automatically (there may be a way to stop, but they did not know what to do), sometimes, may not want to execute when the page loads inquiry!

 

Second, programmatic

If you like to write code that can be used directly programming, programmatic main work includes: table definition (defined header, various options).

Detailed instructions can refer to the official website, or simply look at the development version of the code (described in detail src / constants / index.js in the DEFAULTS on).

Here are two pieces of code: initialization, custom ajax query

1. Initialization

$ ( '# Table' ) .bootstrapTable ({ 
        URL: 'Data / scores.json',         // table Source 
        Method: 'GET' , 
        the pagination: to true , 
        the pageNumber: . 1,                       // initialize loading the first page of the default one, and records 
        the pageSize:. 5 , 
        uniqueId: "ID" , 
        Columns: [ 
            { 
                Field: 'ID' , 
                visible: to false   // do not show             
            }, 
            { 
                Field: 'name' ,
                title: 'name' 
            }, { 
                Field,: 'Sex' , 
                title: 'sex' 
            }, { 
                Field,: 'Birthday' , 
                title: 'date of birth' 
            }, { 
                Field,: 'SubjectName' , 
                title: 'Account Name' 
            } , { 
                Field: 'scoredate' , 
                title: 'test date'  
            }, { 
                Field: 'Score' , 
                title:'Achievements' ,
                formatter: function (value, row, index) {
                    console.log(value);
                    var res="";
                    if (value>50){
                        res= '<p  style="color:green" >'+value+'</p>';
                    }
                    else{
                        res= '<p style="color:red" >'+value+'</p>';
                    }
                    
                    return res;
                }            
            }
            ,{
                field: 'id','Operation'
                title:,
                formatter: function (value, row, index) {
                    var res='<input type=button value="删除" onclick="fnDel('+row.id+')>'+
                           '<input type=button value="修改" onclick="fnUpdate('+row.id+')>';
                    console.log(res);
                    return res;
                }            
            }
        ]
    });

The above is a relatively simple initialization.

2. (stated needs and "Custom ajax request data-ajax used together")

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 ( 
                            { // Note that, the parameter must return the params 
                                "Total" : rs.data.total,                            
                                 "rows" : rs.data.rows 
                            },
                             "the ok", // this seems to temporarily not use 
                            xhr    // in 1.15.5 version, this is the key, if not always return the error! 
                        ); 
                    }                                                 
                    the else { 
                        Alert (rs.msg);
                    } 
                },
                error: function (jqXHR, textStatus, errorThrown) {                     
                    $ .alert ({ 
                        title: 'warning' , 
                        Content: "Query failed data source information, network error:" + textStatus, 
                        autoClose: 'OK | 500' 
                    }); 
                    the params. Success ( 
                            { // Note that, the parameter must return the params 
                                "Total": 0 ,                            
                                 "rows":. 8 
                            },
                             "OK",// This seems temporarily not used
                            jqXHR // in 1.15.5 version, this is the key, if not always return the error! 
                        ); 
                } 
        }); 
    }

Programmatic :

　　　Advantage : everything under control in!

　　　Drawback : the amount of code a little more a little, did not seem so elegant!

 

Third, the learning points

1. First, the basics have js basis, understanding class, variable definitions, events, etc.

2. familiar with jquery and ajax, especially the basic properties and methods ajax object.

3. Read the official documents on the table option and column option individually verified!