layui--js控制switch的切换方法

需求：如下所示，当【主键】选择为“t”时，【允许为空】不能选择“t”,且会自动切换为“f”;

当【允许为空】选择为“t”时，判断【主键】是否为空，若为“t”，弹出提示，不予更改；

首先需要在table中添加switch控件：

定义主键：以templet模板形式定义控件格式，其中{{ d.isserial == 't' ? 'checked' : '' }}为其设置默认值

{field :'isserial' , title :'主键', minwidth : 120, templet: '#switchtpl', unresize : true	}

<!-- 定义是否主键的开关 -->
<script id="switchtpl" type="text/html">
<!-- 这里的 checked 的状态是-->
<input type="checkbox" name = "ifkey" value = {{d.colno}} lay-skin="switch" lay-text="t|f" lay-filter="ifkeydemo" {{ d.isserial == 't' ? 'checked' : '' }}>
</script>

定义允许为空：

{field :'notnull' , title :'允许为空' , minwidth : 100, templet : '#switchnulltpl', unresize : true}

<!-- 定义是否允许为空的开关 -->
<script id="switchnulltpl" type="text/html">
<input type="checkbox" name="ifnull" value="{{d.colno}}" lay-skin="switch" lay-text="t|f" lay-filter="ifnulldemo" {{ d.notnull == 't' ? 'checked' : '' }}>
</script>

添加监听：监听主键，lay-filter的方式添加监听，重点部分在

// 给对象主键赋值              
tabledata[parenttrindex].isserial = "t";       
// 获取允许为空的div             
var switchifnull=$(parenttr).find("td:eq(6)").find("div:eq(1)"); 
// 修改div的样式为f的样式,f的值            
switchifnull.prop("class","layui-unselect layui-form-switch");//f的样式
switchifnull.find("em").text("f");  //f的值       
tabledata[parenttrindex].notnull = "f"; //修改数据中f的值 

layer.lips('此列为主键，不允许为空',obj.othis); //tips提示

// 主键                  
 form.on('switch(ifkeydemo)', function(obj){	        
	// 获取当前控件                
	var selectifkey=obj.othis;            
	// 获取当前所在行                
	var parenttr = selectifkey.parents("tr");        
	// 获取当前所在行的索引               
	var parenttrindex = parenttr.attr("data-index");       
	                   
	if(obj.elem.checked == true){//是主键          
		// 给对象主键赋值               
		tabledata[parenttrindex].isserial = "t";        
		// 获取允许为空的div              
		var switchifnull=$(parenttr).find("td:eq(6)").find("div:eq(1)");  
		// 修改div的样式为f的样式,f的值             
		switchifnull.prop("class","layui-unselect layui-form-switch");//f的样式 
		switchifnull.find("em").text("f");         
		tabledata[parenttrindex].notnull = "f";        
                    
		layer.lips('此列为主键，不允许为空',obj.othis);         
	}else{                 
		// 给对象赋值                
		tabledata[parenttrindex].isserial = "f";        
	}                  
	                   
});                   

添加监听：监听【允许为空】，同理

// 允许为空                  
form.on('switch(ifnulldemo)', function(obj){         
	// 获取当前控件                 
	var selectifkey=obj.othis;            
	// 获取当前所在行                
	var parenttr = selectifkey.parents("tr");         
	// 获取当前所在行的索引                
	var parenttrindex = parenttr.attr("data-index");       
	// 获取“是否主键”的值                
	var ifkey=parenttr.find(('td:eq(2)')).text().trim();      
	if(ifkey == "t"){               
		// 给对象赋值                
		// 获取允许为空的div               
		var switchifnull=$(parenttr).find("td:eq(6)").find("div:eq(1)");  
		// 修改div的样式为f的样式,f的值             
		switchifnull.prop("class","layui-unselect layui-form-switch");//f的样式 
		switchifnull.find("em").text("f");         
		tabledata[parenttrindex].notnull = "f";        
                    
		layer.alert('此列为主键，不允许为空;若要为空，请更改主键');        
		                  
	}else{                 
		if(obj.elem.checked == true){//允许为空			       
			// 给对象赋值               
			tabledata[parenttrindex].notnull = "t";       
			                 
		}else{                
			// 给对象赋值               
			tabledata[parenttrindex].notnull = "f";       
		}                  
	}                   
	                   
}); 		                 

以上这篇layui--js控制switch的切换方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。