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

 更新时间:2019年09月03日 16:03:01   作者:sj0613xz  
今天小编就为大家分享一篇layui--js控制switch的切换方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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

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

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

相关文章

  • 详谈LABJS按需动态加载js文件

    详谈LABJS按需动态加载js文件

    为了提高页面的打开和加载速度,我们经常把JS文件放在页面的尾部,但是有些JS必须放在页面前面,这样就会增加页面的加载时间;于是出现了按需动态加载的概念,这个概念就是当页面需要用到这个JS文件或者CSS渲染文件的时候,在去请求这些文件,这样就节省了页面的加载时间
    2015-05-05
  • JScript中的条件注释详解

    JScript中的条件注释详解

    这篇文章主要介绍了JScript中的条件注释详解,本文讲解了@cc_on、@if、@set、@_win32、@_win16、@_mac等条件注释语句及可用于条件编译的预定义变量,需要的朋友可以参考下
    2015-04-04
  • Javascript刷新页面的实例

    Javascript刷新页面的实例

    这篇文章主要介绍了Javascript刷新页面的实例的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
    2017-09-09
  • BootStrap 超链接变按钮的实现方法

    BootStrap 超链接变按钮的实现方法

    这篇文章主要介绍了BootStrap 超链接变按钮的实现方法以及js按钮bootstrap超链接的操作方法,本文介绍的非常详细,具有参考借鉴价值,感兴趣的朋友一起看看吧
    2016-09-09
  • JS取文本框中最小值的简单实例

    JS取文本框中最小值的简单实例

    这篇文章主要介绍了JS取文本框中最小值的简单实例,有需要的朋友可以参考一下
    2013-11-11
  • 图片延迟加载的实现代码(模仿懒惰)

    图片延迟加载的实现代码(模仿懒惰)

    在浏览网页时经常会碰到图片延迟加载的情况,它的优势在于提高加载速度,未加载前加载图片占位图,接下来为大家详细介绍下,感兴趣的朋友可以参考下哈
    2013-03-03
  • Bootstrap每天必学之响应式导航、轮播图

    Bootstrap每天必学之响应式导航、轮播图

    Bootstrap每天必学之响应式导航、轮播图,本文的主要内容是在导航条的下方做一张轮播图,自动播放最新的重要动态,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • 浅谈JS读取DOM对象(标签)的自定义属性

    浅谈JS读取DOM对象(标签)的自定义属性

    下面小编就为大家带来一篇浅谈JS读取DOM对象(标签)的自定义属性。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • zTree插件之多选下拉菜单实例代码

    zTree插件之多选下拉菜单实例代码

    zTree插件之多选下拉菜单实例代码。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • 详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)

    详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)

    本文通过两种方法给大家介绍了webpack打包时排除其中一个css、js文件,或单独打包一个css、js文件的方法 ,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-10-10

最新评论