bootstap的switch的使用

我们在使用bootstrap的switch的时候会有点不知道使用，我也是工作了这么久第一次使用bootstarp

我直接给大家上代码

在使用bootstrap我们首先需要引入起

<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', // 服务器数据的请求方式 get or posturl : prefix + "/list", // 服务器数据的加载地址//  showRefresh : true,//   showToggle : true,//    showColumns : true,iconSize : 'outline',toolbar : '#exampleToolbar',striped : true, // 设置为true会有隔行变色效果dataType : "json", // 服务器返回的数据类型pagination : true, // 设置为true会在底部显示分页条// queryParamsType : "limit",// //设置为limit则会发送符合RESTFull格式的参数singleSelect : false, // 设置为true将禁止多选// contentType : "application/x-www-form-urlencoded",// //发送到服务器的数据编码类型pageSize : 10, // 如果设置了分页，每页数据条数pageNumber : 1, // 如果设置了分布，首页页码//search : true, // 是否显示搜索框showColumns : false, // 是否显示内容下拉框（选择显示的列）sidePagination : "server", // 设置在哪里进行分页，可选值为"client" 或者 "server"queryParams : function(params) {return {//说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对limit: params.limit,offset:params.offset,// name:$('#searchName').val(),companyName:$('#searchName').val(),isOutfood:$('#isOutfood_status').val(),isFrozen:$('#isFrozen_status').val(),companyBusinessStatus:$('#companyBusinessStatus_status').val()};},// //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果// queryParamsType = 'limit' ,返回参数必须包含// limit, offset, search, sort, order 否则, 需要包含:// pageSize, pageNumber, searchText, sortName,// sortOrder.// 返回false将会终止请求columns : [{checkbox : true},{field : 'xxxx', title : 'xxxxx' ,align : 'center',//是使用bootstrap的switch组件的方法formatter:project_status},// ],//这个是加载完表格之后需要把switch初始化onLoadSuccess: function(data){// {#初始化switch开关按钮#}initSwitch(data);},});
}
//===这个是初始化switch组件的方法
function initSwitch(e){// {#获取行数据的状态#}console.log('渲染数据完成后，打印所有数据')console.log(data);var data=$("#exampleTable").bootstrapTable("getData");console.log('已获取全部数据%s',data);for (let i in data){console.log(data[i].project_code,data[i].status)$('[id="project_isOutfood_on"]').bootstrapSwitch({onText: "开启",      // 设置ON文本offText: "关闭",    // 设置OFF文本onColor: "success",// 设置ON文本颜色(info/success/warning/danger/primary)offColor: "danger",  // 设置OFF文本颜色 size: "normal",    // 设置控件大小,从小到大  (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)}
}// {#状态栏格式化#}
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+'">';}}

bootstap的switch的使用相关推荐

Go 学习笔记（62）— Go 中 switch 语句中的 switch 表达式和 case 表达式之间的关系
switch 语句对 switch 表达式的结果类型,以及各个 case 表达式中子表达式的结果类型都是有要求的. 毕竟,在 Go 语言中,只有类型相同的值之间才有可能被允许进行判等操作. 1. sw ...
Java基础Switch和循环控制
1. switch语句 1.1 分支语句switch语句格式 switch (表达式) {case 1:语句体1;break;case 2:语句体2;break;...default:语句体n+1; ...
Android switchCompat. 和 Switch
今天礼拜日,回顾知识点看到了switchCompat 这里记录下它的简单使用 switchCompat 使用需要导入v7包,一般这个创建项目的时候默认的都用,也就不用关心了使用呢也很简单布局 ...
Kotlin 中 switch 写法
在Kotlin 中并没有switch 操作符 , 取而代之的是when java的写法: int i= 5;switch (i){case 5:System.out.print("5&quo ...
switch case
1 var v = 2;2 switch (true) {3 case 0:4 alert("值为零");5 break;6 case v > 0 && v ...
C++ 笔记（12）— 判断（if/if...else/switch、条件运算符）
1. if 语句 C++ 中 if 语句的语法: if (boolean_expression) {// 如果布尔表达式为真将执行的语句 } 如果布尔表达式为 true ,则 if 语句内的代码块将被 ...
Go 学习笔记（8）— 条件语句（if、if...else...、switch、fallthrough）
Go 语言提供了以下几种条件判断语句: 语句描述 if 语句 if 语句由一个布尔表达式后紧跟一个或多个语句组成 if-else 语句 if 语句后可以使用可选的 else 语句, else 语 ...
编写函数求两个整数 a 和 b 之间的较大值。要求不能使用if, while, switch, for, ?: 以及任何的比较语句。...
本题要求不能使用if, while, switch, for, ?: 以及任何的比较语句,也就是要求我们不能用常规的方法来判断两个数的大小. 那么按照以往的方法,要判断两个数的大小,应该要将两个数进 ...
C 语言中的 switch 语句 case 后面是否需要加大括号
事件原由为编辑器的自动缩进,当 case 换行后不自动缩进. 于是在在想可以可否在 case 后面再大括号,让其自动缩进. 查了资料,发现 case 是可以加大括号的,相当于代码块. 而且还有另外一个 ...

bootstap的switch的使用

bootstap的switch的使用相关推荐

最新文章

热门文章