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 相关文章推荐
JQuery1.4+ Ajax IE8 内存泄漏问题
Oct 15 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
Mar 17 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
Jan 18 Javascript
javascript实现点击后变换按钮显示文字的方法
May 13 Javascript
jquery实现弹出层登录和全屏层注册特效
Aug 28 Javascript
window.onload使用指南
Sep 13 Javascript
Bootstrap选项卡与Masonry插件的完美结合
Jul 06 Javascript
轻松5句话解决JavaScript的作用域
Jul 15 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
Feb 19 Javascript
vue项目中使用tinymce编辑器的步骤详解
Sep 11 Javascript
JS闭包原理与应用经典示例
Dec 20 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
Apr 14 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
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
PHP记录页面停留时间的方法
2016/03/30 PHP
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
老生常谈javascript变量的命名规范和注释
2016/09/29 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
前端Vue项目详解--初始化及导航栏
2019/06/24 Javascript
Electron 调用命令行(cmd)
2019/09/23 Javascript
小程序跨页面交互的作用与方法详解
2020/01/07 Javascript
vue 导出文件,携带请求头token操作
2020/09/10 Javascript
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
Python中的zip函数使用示例
2015/01/29 Python
python matplotlib 注释文本箭头简单代码示例
2018/01/08 Python
详解Django-auth-ldap 配置方法
2018/12/10 Python
python3 cvs将数据读取为字典的方法
2018/12/22 Python
python实现将json多行数据传入到mysql中使用
2019/12/31 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
css3 边框、背景、文本效果的实现代码
2018/03/21 HTML / CSS
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
ColourPop美国官网:卡拉泡泡,洛杉矶彩妆品牌
2019/04/28 全球购物
教师自荐书
2013/10/08 职场文书
护理专业学生的求职信范文
2013/12/11 职场文书
给交警的表扬信
2014/01/12 职场文书
幼儿园国庆节活动方案
2014/02/01 职场文书
消防安全员岗位职责
2014/03/10 职场文书
敬老院献爱心活动总结
2014/07/08 职场文书
关于感恩的演讲稿800字
2014/08/26 职场文书
2014镇党委班子对照检查材料思想汇报
2014/09/23 职场文书
儿园租房协议书范本
2014/12/02 职场文书
装饰技术负责人岗位职责
2015/04/13 职场文书
学子宴致辞大全
2015/07/27 职场文书
中国梦党课学习心得体会
2016/01/05 职场文书
创业计划书之养殖业
2019/10/11 职场文书
Vue自定义铃声提示音组件的实现
2022/01/22 Vue.js
Python之matplotlib绘制折线图
2022/04/13 Python
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS