Bootstrap-Switch开关控件使用指南

Bootstrap-Switch

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

效果图

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

引入插件文件

<link href="static/bootstrap/dist/css/bootstrap-switch.min.css" type="text/css" rel="stylesheet" />
<script src="static/bootstrap/dist/js/bootstrap-switch.min.js"></script>

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

<input name="switch" type="checkbox" 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数据表格的使用指南。

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

{
   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' />";
    }
}

渲染后效果如下

 

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

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开关控件的基本用法差不多就这些了。原创不易，如果对你有帮助的话，请不要吝啬你手中点赞的权力。