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


Posted in Javascript onSeptember 03, 2019

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

当【允许为空】选择为“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 的状态是-->
<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的切换方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
菜单效果
Oct 14 Javascript
encode脚本和normal脚本混用的问题与解决方法
Mar 08 Javascript
js截取函数(indexOf,join等)
Sep 01 Javascript
30个最好的jQuery 灯箱插件分享
Apr 25 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
May 16 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
Jun 05 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
Jun 19 Javascript
vue.js整合mint-ui里的轮播图实例代码
Dec 27 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
Feb 03 Javascript
JavaScript实现旋转木马轮播图
Mar 16 Javascript
vant时间控件使用方法详解
Dec 24 Javascript
用JS写一个发布订阅模式
Nov 07 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
Sep 03 #Javascript
layui中的switch开关实现方法
Sep 03 #Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
Sep 03 #Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
Sep 03 #Javascript
vue路由教程之静态路由
Sep 03 #Javascript
多个vue子路由文件自动化合并的方法
Sep 03 #Javascript
Emberjs 通过 axios 下载文件的方法
Sep 03 #Javascript
You might like
php中数组首字符过滤功能代码
2012/07/31 PHP
浅析php面向对象public private protected 访问修饰符
2013/06/30 PHP
php实现最简单的MVC框架实例教程
2014/09/08 PHP
typecho插件编写教程(三):保存配置
2015/05/28 PHP
微信公众平台开发之天气预报功能
2015/08/31 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
AlertBox 弹出层信息提示框效果实现步骤
2010/10/11 Javascript
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
js判断浏览器类型的方法
2013/08/07 Javascript
jquery实现加载等待效果示例
2013/09/25 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
2014/08/15 Javascript
原生js实现addclass,removeclass,toggleclasss实例
2016/11/24 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
2017/01/24 Javascript
详解vue2.0脚手架的webpack 配置文件分析
2017/05/27 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
angular异步验证防抖踩坑实录
2019/12/01 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
JS轮播图的实现方法2
2020/08/25 Javascript
[06:04]DOTA2国际邀请赛纪录片:Just For LGD
2013/08/11 DOTA
Python time模块详解(常用函数实例讲解,非常好)
2014/04/24 Python
在ironpython中利用装饰器执行SQL操作的例子
2015/05/02 Python
Python入门教程之运算符与控制流
2016/08/17 Python
如何使用VSCode愉快的写Python于调试配置步骤
2018/04/06 Python
python2.7和NLTK安装详细教程
2018/09/19 Python
python list格式数据excel导出方法
2018/10/31 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
Python使用socket_TCP实现小文件下载功能
2020/10/09 Python
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
机电一体化求职信
2014/03/10 职场文书
出生证明公证书
2014/04/09 职场文书
2014审计局领导班子民主生活会对照检查材料思想汇报
2014/09/20 职场文书
2014年乡镇卫生院工作总结
2014/11/24 职场文书
优秀教研组申报材料
2014/12/26 职场文书
入党转正申请报告
2015/05/15 职场文书
2015年环境监察工作总结
2015/07/23 职场文书