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

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

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

當(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)部分在

// 給對象主鍵賦值              
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){//是主鍵          
		// 給對象主鍵賦值               
		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){         
	// 獲取當(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"){               
		// 給對象賦值                
		// 獲取允許為空的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的切換方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持創(chuàng)新互聯(lián)。

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

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站制作、全網(wǎng)營銷推廣、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站收錄、外貿(mào)網(wǎng)站建設(shè)

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

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

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