Bootstrap-Switch开关控件使用指南

简介: Bootstrap-Switch开关控件使用指南
}
});


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 “”;
} else {
return “”;
}
}


渲染后效果如下


f3a58e678b85e9ba68b71b10d1a5f5b0_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2,size_16,color_FFFFFF,t_70.png


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


d29e4e9a9fea57ec7ba983362b75cd16_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2,size_16,color_FFFFFF,t_70.png


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(){
});
}
});
}
相关文章
|
2月前
|
前端开发
BootStrap让两个控件在一行显示(label和input同行)
BootStrap让两个控件在一行显示(label和input同行)
199 0
|
移动开发 前端开发 HTML5
开心档 - 软件开发入门之 Bootstrap4 表单控件
Bootstrap 支持所有的 HTML5 输入类型: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, 以及 color。
|
前端开发
Bootstrap教程(10)--使用输入组来组合控件
本文目录 1. 概述 2. 使用输入组 3. 调整输入组的大小 4. 小结
138 0
Bootstrap教程(10)--使用输入组来组合控件
|
移动开发 前端开发 HTML5
Bootstrap教程(9)--使用表单控件
本文目录 1. 概述 2. 基本输入控件 3. 调整表单控件的大小 4. 表单控件的特殊用法 4.1 单选框用法 4.2 复选框用法 5. 小结
183 0
Bootstrap教程(9)--使用表单控件
|
JSON 前端开发 JavaScript
文件上传控件bootstrap-fileinput与Python交互
文件上传控件bootstrap-fileinput与Python进行数据交互
|
前端开发
Bootstrap系列 -- 14. 表单控件输入框input
     每一个表单都是由表单控件组成。离开了控件,表单就失去了意义。接下来的我们简单的来了解Bootstrap框架中表单控件的相关知识。   单行输入框,常见的文本输入框,也就是input的type属性值为text。
1037 0
|
前端开发
|
前端开发 JavaScript 容器