bootstrap switch组件：切换状态以及初始化状态

最新推荐文章于 2021-10-25 19:24:28 发布

小板凳-BGM

最新推荐文章于 2021-10-25 19:24:28 发布

阅读量4.8k

点赞数 2

分类专栏：笔记文章标签： bootstrap switch初始化

本文链接：https://blog.csdn.net/qq_34279442/article/details/89320301

版权

笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

主要地方都标记了注释，本人也是试了网上说的去掉checked会改变初始状态，说来惭愧，没有生效

<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/tag.inc.jsp"%>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
<title>My JSP 'weightWay.jsp' starting page</title>
<link rel="stylesheet" href="<c:url value='/mesui/bootstrap/css/bootstrap.min.css'/>" type="text/css"></script>
<link rel="stylesheet" href="<c:url value='/mesui/bootstrap/css/bootstrap-switch.min.css'/>" type="text/css"></script>
<script type="text/javascript" src="<c:url value='/mesui/bootstrap/js/bootstrap.min.js'/>"></script>
<script type="text/javascript" src="<c:url value='/mesui/bootstrap/js/bootstrap-table.js'/>"></script>
<script type="text/javascript" src="<c:url value='/mesui/bootstrap/js/bootstrap-switch.min.js'/>"></script>
<script type="text/javascript">
    	$(function(){
    		searchdata();
    	});
    	function searchdata(){
    		$('#weightWay').bootstrapTable({
    			method: 'post',
        		editable:true,//开启编辑模式  
        		clickToSelect: true,
        		cache : false,
    			url:"<c:url value='/qm/weightWay.sp?method=list'/>",
    			columns:[
    				{field:'step_number',title:'工序',align:'center',formatter:function(val,row,index){
    					var a = row.step_number;
    					if(a=='20'){
    						return '挤出';
    					}
    					if(a=='30'){
    						return '辐照';
    					}
    					if(a=='40'){
    						return '扩张';
    					}
    					if(a=='50'){
    						return '上盘';
    					}
    					if(a=='60'){
    						return '切管';
    					}
    					if(a=='90'){
    						return '封帽';
    					}
    				}},
    				{field:'is_feed',title:'投料称重功能',align:'center',formatter: forIsFeed},
    				{field:'is_remove',title:'卸盘/筐称重功能',align:'center',formatter: forIsRemove},
    				{field:'is_kg',title:'单位',align:'center'},
    			],
    			onLoadSuccess:function(data){
    				for(var i=0;i<data.rows.length;i++){
    						datas = data.rows;
    						var states = datas[i].is_feed;
    						var keys = datas[i].key;
    						if(states=='1'){//根据j对应数据库里的状态改变相应switch状态
    							states = true;
    						}else{
    							states = false;
    						}
    						var myname = 'my-checkbox1'+keys;
    						
    						var statess = datas[i].is_remove;
    						if(statess=='1'){
    							statess = true;
    						}else{
    							statess = false;
    						}
    						var mynames = 'my-checkbox2'+keys;
		    				$('[name="'+myname+'"]').bootstrapSwitch({
									onText:"开启",
									offText:"关闭",
									onColor:"success",
									offColor:"danger",
									size:"small",
									onSwitchChange:function(event,state){
										var step = this.value;
										var way = "isfeed";
										if(state==true){
												isWeightWay(step,state,way);
												console.log('已打开'+step);
										}else{
												isWeightWay(step,state,way);
												console.log('已关闭'+step);												
										}
									}
							}).bootstrapSwitch('state',states);//onSwitchChange:function切换状态事件，.bootstrapSwitch('state',states)加载switch初始状态；（有一点不好的地方，就是每次进入界面都会触发onSwitchChange事件）

		    				$('[name="'+mynames+'"]').bootstrapSwitch({
									onText:"开启",
									offText:"关闭",
									onColor:"success",
									offColor:"danger",
									size:"small",
									onSwitchChange:function(event,state){
										var step = this.value;
										var way = "isremove";
										if(state==true){
											
												isWeightWay(step,state,way);
												console.log('已打开'+step);
											
										}else{
											
												isWeightWay(step,state,way);
												console.log('已关闭'+step);												
											
										}
										
									}
							}).bootstrapSwitch('state',statess);
    					} 
					
				}, 
    			queryParams:{
    			},
    		})
    	}
    	function forIsFeed(val,row,index){
    		var a=row.key;
    		if(0==val){
    			return '-';
    		}else{
    			return "<input value='"+a+"' type='checkbox' name='my-checkbox1"+a+"'/>";//将后台传来的key值赋给了value，也就能拿到操作的是哪一条数据；赋值给name部分是为了能加载区别每个按钮，也可以赋给id属性；
    		}
    	}
    	
    	function forIsRemove(val,row,index){
    		var a=row.key;
    		if(0==val){
    			return '-';
    		} else{
    			return "<input value='"+a+"' type='checkbox' name='my-checkbox2"+a+"' />";
    		}
    	}
    	//切换状态所执行的步骤
    	function isWeightWay(step,state,isWay){
    		$.ajax({
    			type:'post',
    			dataType:'json',
    			url:"<c:url value='/qm/weightWay.sp?method=isFunctionWay'/>",
    			data:{
    				key:step,
    				state:state,
    				way:isWay,
    			},
    			success:function(data){
    				result=data.result;
    				if(result==0){
    					$.messager.alert("提示",data.errMsg, "info");//这里用的是easyui的弹窗，不要用这个 ！！-。-！！
    				}
    			}
    		})
    	}
    </script>

  </head>
  	
<!--   <input type='checkbox' name='my-checkbox' id='my-checkbox' checked  /> -->
  
  <body>
    	<div>
    		<table id="weightWay" 
    		class="table table-striped table-bordered table-hover table-condensed" style="width: 60%;"> </table>
    	</div>
  </body>
</html>

在这里插入图片描述效果图；实现的功能：可以关闭相应的工序的功能

小板凳-BGM

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
4
评论
bootstrap switch组件：切换状态以及初始化状态

主要地方都标记了注释，本人也是试了网上说的去掉checked会改变初始状态，说来惭愧，没有生效<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%><%@ include file="/common/tag.inc.jsp"%><!DOCTYPE html><ht...
复制链接

扫一扫