current position:Home>Bootstrap switch switch control user's guide, springcloud actual combat video

Bootstrap switch switch control user's guide, springcloud actual combat video

2022-01-27 02:34:57 Alibaba_ Open Source

Plug in download address :https://github.com/Bttstrp/bootstrap-switch

Import plug-in file

HTML part , Just one input Just select multiple boxes ,checked Set the initial state .

JS Render switch control , among onSwitchChange Add switch control state change .

//name Values and input Labeled name Have the same value

$("[name=‘switch’]").bootstrapSwitch({

onText : “ Enable ”, // Set up ON Text

offText : “ Ban ”, // Set up OFF Text

onColor : “success”,// Set up ON text color (info/success/warning/danger/primary)

offColor : “warning”, // Set up OFF text color (info/success/warning/danger/primary)

size : “normal”, // Set control size , From small to large (mini/small/normal/large)

// Trigger when the switch state changes

onSwitchChange : function(event, state) {

if(state==true){

console.log(“true”);

}else{

console.log("fals

《 A big factory Java Analysis of interview questions + Back end development learning notes + The latest architecture explanation video + Practical project source code handout 》

【docs.qq.com/doc/DSmxTbFJ1cmN1R2dB】 Full content open source sharing

e");

}

}

});

BootStrapTable Use... In data tables Bootstrap-Switch Switch controls

If the BootStrapTable The data table has something you don't understand , You can visit Bootstrap Table Guide to the use of data tables .

First, add the switch status column to the table column . The code is as follows .

{

field: ‘isUsed’,

title: ‘ state ’,

valign: ‘middle’,

halign: ‘center’,

align: ‘center’,

formatter: ‘typeSwitch’ // Add button to table

}

Switch style code . Add switch label value The value is... Of the current line id, Used to modify the status .

// Switch controls in the table

function typeSwitch(value, row, index){

if (value) {

return “”;

} else {

return “”;

}

}

The effect after rendering is as follows

In the rendering table JS Add the following code to , To render switch controls and listen for changes to switch controls .

onLoadSuccess: function () { // Triggered when remote data is successfully loaded

$("[name=‘switch’]").bootstrapSwitch({

onText : “ Enable ”, // Set up ON Text

offText : “ Ban ”, // Set up OFF Text

onColor : “success”,// Set up ON text color (info/success/warning/danger/primary)

offColor : “warning”, // Set up OFF text color (info/success/warning/danger/primary)

size : “small”, // Set control size , From small to large (mini/small/normal/large)

copyright notice
author[Alibaba_ Open Source],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/01/202201270234548704.html