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

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

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

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

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

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

定义主键:以templet模板形式定义控件格式,其中{{ d.isSerial == 'T' "htmlcode">

{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' "htmlcode">
{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' "htmlcode">
// 给对象主键赋值              
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的切换方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?