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 相关文章推荐
JavaScript的面向对象(一)
Nov 09 Javascript
编写针对IE的JS代码两种编写方法
Jan 30 Javascript
javascript创建对象的几种模式介绍
May 06 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
Jun 06 Javascript
Document.body.scrollTop的值总为零的快速解决办法
Jun 09 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
jQuery选择器实例应用
Jan 05 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
Jun 19 Javascript
关于vue-resource报错450的解决方案
Jul 24 Javascript
vue 挂载路由到头部导航的方法
Nov 13 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
Jan 07 Javascript
jQuery实现动态向上滚动
Dec 21 jQuery
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与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
一个PHP验证码类代码分享(已封装成类)
2011/07/17 PHP
php中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
php5.3 不支持 session_register() 此函数已启用的解决方法
2013/11/12 PHP
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
node.js正则表达式获取网页中所有链接的代码实例
2014/06/03 Javascript
jQuery显示和隐藏 常用的状态判断方法
2015/01/29 Javascript
jquery实现删除一个元素后面的所有元素功能
2015/12/21 Javascript
JavaScript如何实现组合列表框中元素移动效果
2016/03/01 Javascript
基于Bootstrap3表格插件和分页插件实例详解
2016/05/17 Javascript
使用vue.js制作分页组件
2016/06/27 Javascript
JavaScript动态数量的文件上传控件
2016/11/18 Javascript
Nodejs 获取时间加手机标识的32位标识实现代码
2017/03/07 NodeJs
JS Ajax请求会话过期处理问题解决方法分析
2019/11/16 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
2020/10/20 Javascript
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
Python生成随机密码
2015/03/10 Python
Python中optparser库用法实例详解
2018/01/26 Python
从请求到响应过程中django都做了哪些处理
2018/08/01 Python
idea创建springMVC框架和配置小文件的教程图解
2018/09/18 Python
使用python对文件中的单词进行提取的方法示例
2018/12/21 Python
python在OpenCV里实现投影变换效果
2019/08/30 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
Python基于read(size)方法读取超大文件
2020/03/12 Python
2013年学期结束动员演讲稿
2014/01/07 职场文书
幼儿园家长会邀请函
2014/01/15 职场文书
《记承天寺夜游》教学反思
2014/02/16 职场文书
寻找最美家庭活动方案
2014/08/20 职场文书
公务员党员评议表自我鉴定
2014/09/14 职场文书
证婚人致辞精选
2015/07/28 职场文书
2016年度优秀辅导员事迹材料
2016/02/26 职场文书
python保存大型 .mat 数据文件报错超出 IO 限制的操作
2021/05/10 Python
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android