The use of bootstap switch

When we use [bootstrap] ‘s switch, we don’t know how to use it. It is the first time I use bootstrap after working for so long.

I will give you the code directly

When using bootstrap, we first need to introduce the

<link href="https://cdn.bootcss.com/bootstrap-switch/4.0.0-alpha.1/css/bootstrap-switch.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap-switch/4.0.0-alpha.1/js/bootstrap-switch.min.js"></script>

function load() {
    $('#exampleTable')
            .bootstrapTable(
                    {
                        method : 'get' , // How to request server data get or post 
                        url : prefix + "/list" , // Load address of server data 
                    // showRefresh : true, 
                    // showToggle : true, 
                    // showColumns : true, 
                        iconSize : 'outline' ,
                         toolbar : '#exampleToolbar' ,
                         striped : true , // If set to true, there will be interlaced color change effect 
                        dataType : "json" , // The data type returned by the server 
                        pagination : true , // If set to true, it will Display the paging bar at the bottom 
                        // queryParamsType : "limit", 
                        // //If set to limit, the parameters that conform to the RESTFull format will be sent
                        singleSelect : false , // Set to true to disable multiple selections 
                        // contentType : "application/x-www-form-urlencoded", 
                        // // Data encoding type sent to the server 
                        pageSize : 10 , // If paging is set , the number of data per page 
                        pageNumber : 1 , // If the distribution is set, the home page number 
                        //search : true, // Whether to display the search box 
                        showColumns : false , // Whether to display the content drop-down box (select the displayed column) 
                        sidePagination : "server" , // where to set pagination, optional value is "client" or "server" 
                        queryParams : function ( params ) {
                             return {
                                //Description: The parameters passed into the background include offset start index, limit step size, sort sorting column, order: desc or, and key-value pairs of all columns
                                limit: params.limit,
                                offset:params.offset,
                               // name:$('#searchName').val(),
                                companyName:$('#searchName').val(),
                                isOutfood:$('#isOutfood_status').val(),
                                isFrozen:$('#isFrozen_status').val(),
                                companyBusinessStatus:$('#companyBusinessStatus_status').val()
                            };
                        },
                        // //When requesting server data, you can add some extra parameters by rewriting the parameters, such as the parameters in the toolbar. If 
                        // queryParamsType = 'limit', the returned parameters must contain 
                        // limit, offset, search, sort , order otherwise, needs to contain: 
                        // pageSize, pageNumber, searchText, sortName, 
                        // sortOrder. 
                        // Returning false will terminate the request
                        columns : [
                                {
                                    checkbox : true
                                },

                                    {
                                    field : 'xxxx' , 
                                     title : 'xxxxx' ,
                                     align : 'center' ,
                                     // is the method of using bootstrap's switch component
                                    formatter:project_status
                                },
                            // 
                        ],
                        //This is to initialize the switch after loading the table 
                        onLoadSuccess: function ( data ) {
                             // {#Initialize the switch button#}
                            initSwitch(data);
                        },

                    });
}
//===This is the method to initialize the switch component 
function  initSwitch ( e ) {
     // {#Get the status of the row data#} 
    console .log( 'After rendering the data, print all the data' )
     console .log(data) ;
     var data=$( "#exampleTable" ).bootstrapTable( "getData" );
     console .log( 'All data %s' ,data);
     for ( let i in data){
         console .log(data[i ].project_code,data[i].status)




            $( '[id="project_isOutfood_on"]' ).bootstrapSwitch({
                 onText : "On" ,       // Set ON text 
                offText: "Off" ,     // Set OFF text 
                onColor: "success" , // Set ON text color (info/success/warning/danger/primary) 
                offColor: "danger" ,   // set the OFF text color 
                size: "normal" ,     // set the control size, from small to large (mini/small/normal/large) 
                onSwitchChange: function ( event, state ) {
                     let userid = this .name;
                    if(state==false){
                        updatecompay(userid,1,"isOutfood");
                    }else{
                        updatecompay(userid,0,"isOutfood");
                    }
                }
            }).bootstrapSwitch('state',true,true)



    }
}


// {#StatusBarFormat#} 
function  project_status ( value, row, index ) {
     console .log(row);
     if (row.xxxx== 0 ){
         return  '<input type="checkbox" checked id=" project_isOutfood_on" name="'
            + row.userId
            +'">';
    }

}

Leave a Comment

Your email address will not be published. Required fields are marked *