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

需求：如下所示，當【主鍵】選擇為“T”時，【允許為空】不能選擇“T”,且會自動切換為“F”;

10年積累的網站建設、成都網站設計經驗，可以快速應對客戶對網站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網絡服務。我雖然不認識你，你也不認識我。但先網站設計后付款的網站建設流程，更有五大連池免費網站建設讓你可以放心的選擇與我們合作。

當【允許為空】選擇為“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 的狀態(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}

<!-- 定義是否允許為空的開關 -->
<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)聽，重點部分在

// 給對象主鍵賦值              
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";        
	}                  
	                   
});

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

// 允許為空                  
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的切換方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持創(chuàng)新互聯。

名稱欄目：layui--js控制switch的切換方法
分享地址：http://bm7419.com/article18/gihpgp.html

成都網站建設公司_創(chuàng)新互聯，為您提供品牌網站設計、品牌網站制作、全網營銷推廣、手機網站建設、網站收錄、外貿網站建設

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯

h5響應式網站建設