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去除空格的几种方法
Oct 03 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
Aug 09 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
May 16 Javascript
JS实现当前页居中分页效果的方法
Jun 18 Javascript
javascript的变量、传值、传址、参数之间关系
Jul 26 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 Javascript
微信小程序 setData使用方法及常用错误解决办法
May 11 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 Javascript
vue微信分享到朋友圈 vue微信发送给好友
Nov 28 Javascript
WebSocket的简单介绍及应用
May 23 Javascript
Vue解析带html标签的字符串为dom的实例
Nov 13 Javascript
js中switch语句的学习笔记
Mar 25 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
收音机的保养
2021/03/01 无线电
PHP扩展模块Pecl、Pear以及Perl的区别
2014/04/09 PHP
PHP图片处理之图片背景、画布操作
2014/11/19 PHP
PHP使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
通用JS事件写法实现代码
2009/01/07 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
Javascript控制input输入时间格式的方法
2015/01/28 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
JavaScript限定图片显示大小的方法
2015/03/11 Javascript
jQuery Validate初步体验(一)
2015/12/12 Javascript
js获取本机操作系统类型的两种方法
2015/12/19 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
js省市县三级联动效果实例
2020/04/15 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
JavaScript事件委托原理与用法实例分析
2018/06/07 Javascript
浅谈Fetch 数据交互方式
2018/12/20 Javascript
从零学python系列之数据处理编程实例(一)
2014/05/22 Python
Python基础入门之seed()方法的使用
2015/05/15 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
在django中图片上传的格式校验及大小方法
2019/07/28 Python
Python pandas用法最全整理
2019/08/04 Python
Python selenium的基本使用方法分析
2019/12/21 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
python能自学吗
2020/06/18 Python
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
英国户外服装品牌:Craghoppers
2019/04/25 全球购物
农药学硕士毕业生自荐信
2013/09/25 职场文书
高中生毕业自我鉴定
2013/10/10 职场文书
税务专业毕业生自荐信
2013/11/10 职场文书
2016春季校长开学典礼致辞
2015/11/26 职场文书
JavaScript 事件捕获冒泡与捕获详情
2021/11/11 Javascript
Nginx 反向代理解决跨域问题多种情况分析
2022/01/18 Servers