微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

主要地方都标记了注释,本人也是试了网上说的去掉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>

在这里插入图片描述

效果图;实现的功能:可以关闭相应的工序的功能

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐