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 相关文章推荐
用jscript实现新建word文档
Jun 15 Javascript
浅谈javascript中call()、apply()、bind()的用法
Apr 20 Javascript
jQuery检测滚动条是否到达底部
Dec 15 Javascript
XMLHttpRequest Level 2 使用指南
Aug 26 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
Apr 04 Javascript
JavaScript中的遍历详解(多种遍历)
Apr 07 Javascript
详解react内联样式使用webpack将px转rem
Sep 13 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
Jan 16 Javascript
vue实现信息管理系统
May 30 Javascript
javascript的hashCode函数实现代码小结
Aug 11 Javascript
使用TS来编写express服务器的方法步骤
Oct 29 Javascript
JavaScript枚举选择jquery插件代码实例
Nov 17 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
在IIS上安装PHP4.0正式版
2006/10/09 PHP
Java和PHP在Web开发方面对比分析
2015/03/01 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
javascript URL编码和解码使用说明
2010/04/12 Javascript
javascript字符串拼接的效率问题
2010/12/25 Javascript
jquery getScript动态加载JS方法改进详解
2012/11/15 Javascript
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
js兼容的placeholder属性详解
2013/08/18 Javascript
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
jQuery操作cookie方法实例教程
2014/11/25 Javascript
原生js和jquery实现图片轮播特效
2015/04/23 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
jquery 手势密码插件
2017/03/17 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
nodeJs爬虫的技术点总结
2018/05/13 NodeJs
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
2018/09/16 Javascript
详解小程序如何改变onLoad的执行时机
2019/11/01 Javascript
用Python登录Gmail并发送Gmail邮件的教程
2015/04/17 Python
浅谈python中的面向对象和类的基本语法
2016/06/13 Python
Python 文件处理注意事项总结
2017/04/10 Python
详解 Python中LEGB和闭包及装饰器
2017/08/03 Python
python爬取网易云音乐评论
2018/11/16 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
详解matplotlib中pyplot和面向对象两种绘图模式之间的关系
2021/01/22 Python
纽约海:Sea New York
2018/11/04 全球购物
毕业生大学生活自我总结
2014/01/31 职场文书
送温暖献爱心活动总结
2014/07/08 职场文书
六查六看剖析材料
2014/10/06 职场文书
员工工作能力评语
2014/12/31 职场文书
罚站检讨书
2015/01/29 职场文书
浅谈pytorch中的dropout的概率p
2021/05/27 Python
python 使用pandas读取csv文件的方法
2022/12/24 Python