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模仿msgbox提示效果代码
Jun 10 Javascript
屏蔽Flash右键信息的js代码
Jan 17 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
Nov 19 Javascript
bootstrap-treeview自定义双击事件实现方法
Jan 09 Javascript
JS 循环li添加点击事件 (闭包的应用)
Dec 10 Javascript
node.js操作mysql简单实例
May 25 Javascript
总结js函数相关知识点
Feb 27 Javascript
微信小程序自定义键盘 内部虚拟支付
Dec 20 Javascript
Three.js中矩阵和向量的使用教程
Mar 19 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
Jul 19 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
Sep 25 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
May 09 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/12/06 PHP
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
3种php生成唯一id的方法
2015/11/23 PHP
PHP面向对象程序设计之命名空间与自动加载类详解
2016/12/02 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
Js 获取当前日期时间及其它操作实现代码
2021/03/04 Javascript
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
Jquery Change与bind事件代码
2011/09/29 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
使用变量动态设置js的属性名
2014/10/19 Javascript
浅谈javascript面向对象程序设计
2015/01/21 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
JavaScript中的parse()方法使用简介
2015/06/12 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
任意Json转成无序列表的方法示例
2016/12/09 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
2017/09/05 Javascript
AngularJS 的$timeout服务示例代码
2017/09/21 Javascript
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
详解JS函数stack size计算方法
2018/06/18 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
2019/03/28 Javascript
vue cli3.0 引入eslint 结合vscode使用
2019/05/27 Javascript
[01:33:07]VGJ.T vs Newbee Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python Django里CSRF 对应策略详解
2019/08/05 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
BONIA官方网站:国际奢侈品牌和皮革专家
2016/11/27 全球购物
个人实用的自我评价范文
2013/11/23 职场文书
国培计划培训感言
2014/03/11 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
大学学生个人总结
2015/02/15 职场文书
戒赌保证书
2015/05/11 职场文书
2016新年致辞
2015/08/01 职场文书
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js
Java中PriorityQueue实现最小堆和最大堆的用法
2021/06/27 Java/Android
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA