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 动态创建VML的方法
Oct 14 Javascript
EasyUI中的tree用法介绍
Nov 01 Javascript
uploadify 3.0 详细使用说明
Jun 18 Javascript
javascript 使用 NodeList需要注意的问题
Mar 04 Javascript
js倒计时小程序
Nov 05 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
May 25 Javascript
关于Bootstrap按钮组件消除黄框的方法
May 19 Javascript
详解AngularJS跨页面传值(ui-router)
Aug 23 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
Sep 07 Javascript
使用原生js+canvas实现模拟心电图的实例
Sep 20 Javascript
js中数组对象去重的两种方法
Jan 18 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
Nov 05 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
10个可以简化php开发过程的MySQL工具
2010/04/11 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
2016/11/22 Javascript
javascript实现复选框全选或反选
2017/02/04 Javascript
详解NodeJS框架express的路径映射(路由)功能及控制
2017/03/24 NodeJs
Angular弹出模态框的两种方式
2017/10/19 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
2018/01/16 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
详解ES6 Promise对象then方法链式调用
2018/10/20 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
2019/09/11 Javascript
微信小程序仿通讯录功能
2020/04/09 Javascript
Vite和Vue CLI的优劣
2021/01/30 Vue.js
Python3实现生成随机密码的方法
2014/08/23 Python
在Python下进行UDP网络编程的教程
2015/04/29 Python
TensorFlow实现随机训练和批量训练的方法
2018/04/28 Python
Tensorflow实现神经网络拟合线性回归
2019/07/19 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
Python Sympy计算梯度、散度和旋度的实例
2019/12/06 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
OpenCV python sklearn随机超参数搜索的实现
2020/01/17 Python
Django 解决由save方法引发的错误
2020/05/21 Python
美国隐形眼镜网上商店:Lens.com
2019/09/03 全球购物
房地产财务管理制度
2014/02/02 职场文书
经营理念口号
2014/06/21 职场文书
技术股东合作协议书
2014/12/02 职场文书
英文辞职信范文
2015/05/13 职场文书
商标侵权律师函
2015/05/27 职场文书
护理心得体会范文
2016/01/22 职场文书
导游词之无锡梅园
2019/11/28 职场文书
Spring Boot DevTools 全局配置学习指南
2022/03/31 Java/Android