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 相关文章推荐
parseInt parseFloat js字符串转换数字
Aug 01 Javascript
js类型检查实现代码
Oct 29 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
Nov 16 Javascript
微信小程序入门教程
Nov 18 Javascript
AngularJS实现网站换肤实例
Feb 19 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
Aug 31 Javascript
使用electron将vue-cli项目打包成exe的方法
Sep 29 Javascript
JSONP 的原理、理解 与 实例分析
May 16 Javascript
深入了解Vue.js 混入(mixins)
Jul 23 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
Oct 29 Javascript
教你使用vscode 搭建react-native开发环境
Jul 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分页函数
2006/10/09 PHP
真正的ZIP文件操作类(php)
2007/07/21 PHP
php侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
推荐25款php中非常有用的类库
2014/09/29 PHP
PhpStorm terminal无法输入命令的解决方法
2016/10/09 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
javascript 自定义事件初探
2009/08/21 Javascript
js封装的textarea操作方法集合(兼容很好)
2010/11/16 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
2011/05/25 Javascript
Javascript 面向对象(三)接口代码
2012/05/23 Javascript
红米手机抢购的js代码
2014/03/10 Javascript
node+express+jade制作简单网站指南
2014/11/26 Javascript
jQuery.extend 函数及用法详细
2015/09/06 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
2016/04/17 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
原生js实现焦点轮播图效果
2017/01/12 Javascript
使用use注册Vue全局组件和全局指令的方法
2018/03/08 Javascript
vue-cli 3.x 修改dist路径的方法
2018/09/19 Javascript
windows实现npm和cnpm安装步骤
2019/10/24 Javascript
[02:04]2014DOTA2国际邀请赛 DK一个时代的落幕
2014/07/21 DOTA
python中的函数用法入门教程
2014/09/02 Python
python列表操作之extend和append的区别实例分析
2015/07/28 Python
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
浅析Python的命名空间与作用域
2020/11/25 Python
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
世界首屈一指的在线男士内衣权威:HisRoom
2017/08/05 全球购物
泰国第一的化妆品网站:Konvy
2018/02/25 全球购物
土木工程师岗位职责
2013/11/24 职场文书
大学生入党思想汇报
2014/01/01 职场文书
数学系个人求职信范文
2014/01/30 职场文书
庆中秋节主题活动方案
2014/02/03 职场文书
经营理念口号
2014/06/21 职场文书
机关党员进社区活动总结
2014/07/05 职场文书
2015年教师节活动总结
2015/03/20 职场文书
创业方案:赚钱的烧烤店该怎样做?
2019/07/05 职场文书