Bootstrap-Switch开关控件使用指南

深藏阁楼爱情的钟 2022-04-12 03:46 1308阅读 0赞

### Bootstrap-Switch ###

Bootstrap Switch是一款轻量级插件，可以给选择框设置类似于开关的样式,它是依赖于Bootstrap的一款插件。将复选框和单选按钮切换为切换开关。

### 效果图 ###

![20200204172235448.png][]

![2020020417224334.png][]

插件下载地址：[https://github.com/Bttstrp/bootstrap-switch][https_github.com_Bttstrp_bootstrap-switch]

**引入插件文件**

HTML部分，只需要一个input多选框即可，checked设置初始是状态。

JS渲染开关控件，其中onSwitchChange添加开关控件状态改变。

//name值和input标签的name值一样
    $("[name='switch']").bootstrapSwitch({
        onText : "启用",      // 设置ON文本
        offText : "禁用",    // 设置OFF文本
        onColor : "success",// 设置ON文本颜色(info/success/warning/danger/primary)
        offColor : "warning",  // 设置OFF文本颜色 (info/success/warning/danger/primary)
        size : "normal",    // 设置控件大小,从小到大  (mini/small/normal/large)
        // 当开关状态改变时触发
        onSwitchChange : function(event, state) {
            if(state==true){
                console.log("true");
            }else{
                console.log("false");
            }
        }
    });

### BootStrapTable数据表格中使用Bootstrap-Switch开关控件 ###

如果对BootStrapTable数据表格有不理解的地方，可以访问[Bootstrap Table数据表格的使用指南。][Bootstrap Table]

先在表格列中添加开关状态列。代码如下。

{
       field: 'isUsed',
       title: '状态',
       valign: 'middle',
       halign: 'center',
       align: 'center',
       formatter: 'typeSwitch' //表格中增加按钮
    }

开关样式代码。添加开关标签的value值为当前行的id，用于修改状态用。

//表格中开关控件
    function typeSwitch(value, row, index){
        if (value) {
            return "<input value=" + row.id + " name='switch' type='checkbox' checked />";
        } else {
            return "<input value=" + row.id + " name='switch' type='checkbox' />";
        }
    }

渲染后效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70][]

在渲染表格的JS中添加如下代码，来渲染开关控件和监听开关控件的改变。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 1][]

onLoadSuccess: function () {	//在成功加载远程数据时触发
        $("[name='switch']").bootstrapSwitch({
            onText : "启用",      // 设置ON文本
            offText : "禁用",    // 设置OFF文本
            onColor : "success",// 设置ON文本颜色(info/success/warning/danger/primary)
            offColor : "warning",  // 设置OFF文本颜色 (info/success/warning/danger/primary)
            size : "small",    // 设置控件大小,从小到大  (mini/small/normal/large)
            // 当开关状态改变时触发
            onSwitchChange : function(event, state) {
                id = this.value;
                $.post('student/update',{id: id, isUsed: state},function(){
    
                });
            }
        });
    }

其中onSwitchChange添加开关控件状态改变，把修改后的状态及当前行的id传递到后台，后台进行修改。

后台修改方法代码。

@RequestMapping(value = "/update")
    @ResponseBody
    public Object update(Integer id, Boolean isUsed) {
        try {
            Student stu = studentService.findById(id);
            stu.setIsUsed(isUsed);
            studentService.save(stu);
            return new AjaxResult("数据修改成功");
        } catch (Exception e) {
            return new AjaxResult(false, "数据修改失败");
        }
    }

其中返回的AjaxResult类是规定的返回格式，可以执行定义。

到这里，Bootstrap-Switch开关控件的基本用法差不多就这些了。**原创不易，如果对你有帮助的话，请不要吝啬你手中点赞的权力**。

[20200204172235448.png]: /images/20220412/cce205bed24a42319e561a93c7696da0.png
[2020020417224334.png]: /images/20220412/c3efdb5bab4449b48da4a794f0d81afa.png
[https_github.com_Bttstrp_bootstrap-switch]: https://github.com/Bttstrp/bootstrap-switch
[Bootstrap Table]: https://blog.csdn.net/qq_40205116/article/details/97031023
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70]: /images/20220412/153e12442a5249969e0d75fb9c10290f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 1]: /images/20220412/f099ddca5ef54c49a9def381cdcc1a07.png