欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-09-07 08:50:58
需求:如下所示,当【主键】选择为“t”时,【允许为空】不能选择“t”,且会自动切换为“f”; 当【允许为空】选择为“t”时,判断【主键】是否为空,若为“t”,弹出提示,不...

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

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

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

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

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

首先需要在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的切换方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。