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

更新時(shí)間：2019年09月03日 16:03:01 作者：sj0613xz

今天小編就為大家分享一篇layui--js控制switch的切換方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

需求：如下所示，當(dāng)【主鍵】選擇為“T”時(shí)，【允許為空】不能選擇“T”,且會(huì)自動(dòng)切換為“F”;

當(dāng)【允許為空】選擇為“T”時(shí)，判斷【主鍵】是否為空，若為“T”，彈出提示，不予更改；

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

定義主鍵：以templet模板形式定義控件格式，其中{{ d.isSerial == 'T' ? 'checked' : '' }}為其設(shè)置默認(rèn)值

{field :'isSerial' , title :'主鍵', minWidth : 120, templet: '#switchTpl', unresize : true	}

<!-- 定義是否主鍵的開關(guān) -->
<script id="switchTpl" type="text/html">
<!-- 這里的 checked 的狀態(tài)是-->
<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}

<!-- 定義是否允許為空的開關(guān) -->
<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>

添加監(jiān)聽：監(jiān)聽主鍵，lay-filter的方式添加監(jiān)聽，重點(diǎn)部分在

// 給對(duì)象主鍵賦值              
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"; //修改數(shù)據(jù)中F的值

layer.lips('此列為主鍵，不允許為空',obj.othis); //tips提示

// 主鍵                  
 form.on('switch(ifKeyDemo)', function(obj){	        
	// 獲取當(dāng)前控件                
	var selectIfKey=obj.othis;            
	// 獲取當(dāng)前所在行                
	var parentTr = selectIfKey.parents("tr");        
	// 獲取當(dāng)前所在行的索引               
	var parentTrIndex = parentTr.attr("data-index");       
	                   
	if(obj.elem.checked == true){//是主鍵          
		// 給對(duì)象主鍵賦值               
		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{                 
		// 給對(duì)象賦值                
		tableData[parentTrIndex].isSerial = "F";        
	}                  
	                   
});

添加監(jiān)聽：監(jiān)聽【允許為空】，同理

// 允許為空                  
form.on('switch(ifNullDemo)', function(obj){         
	// 獲取當(dāng)前控件                 
	var selectIfKey=obj.othis;            
	// 獲取當(dāng)前所在行                
	var parentTr = selectIfKey.parents("tr");         
	// 獲取當(dāng)前所在行的索引                
	var parentTrIndex = parentTr.attr("data-index");       
	// 獲取“是否主鍵”的值                
	var ifKey=parentTr.find(('td:eq(2)')).text().trim();      
	if(ifKey == "T"){               
		// 給對(duì)象賦值                
		// 獲取允許為空的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('此列為主鍵，不允許為空;若要為空，請(qǐng)更改主鍵');        
		                  
	}else{                 
		if(obj.elem.checked == true){//允許為空			       
			// 給對(duì)象賦值               
			tableData[parentTrIndex].notNull = "T";       
			                 
		}else{                
			// 給對(duì)象賦值               
			tableData[parentTrIndex].notNull = "F";       
		}                  
	}                   
	                   
});

以上這篇layui--js控制switch的切換方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: