Layui数据表格判断编辑输入的值,是否为我需要的类型详解


Posted in Javascript onOctober 26, 2019

因为很多使用layui插件做的表格都需要用到layui的表格编辑事件,但是编辑事件是可以随意输入值的,但是如果当我们的字段为数量的时候,又需要获取到数量传进控制器进行数据处理的时候,而控制器接收的数量为int类型。倘若我输入的数量不是整数类型,那么就无法传进控制器,直接报404,找不到url中的方法

所有在使用重载前,最好先对用户输入的值进行一下判断,判断是否符合条件,允许传进控制器

比如我项目中的表格

Layui数据表格判断编辑输入的值,是否为我需要的类型详解

我这个项目要求是,当用户输入的数量大于该商品在该仓库的库存时,就会提醒用户,并且将数量的值,返回为用户编辑前的值。

那么其中需要获取到用户还未编辑时的值,这个是最重要的

所以如何获取到这个数据呢,这里可以使用layui的监听表头工具事件

Layui数据表格判断编辑输入的值,是否为我需要的类型详解

oldQuantity就是用户编辑前的值了,

为什么说他是编辑前的值???

因为这个方法,是在点击表头为数量的单元格时,就会触发,然后获取表中的数据

而layui的表格编辑事件是当用户写完后,点击空白才会触发,就是因为这个先后的问题,所以使oldoldQuantity就成为了之前的旧的数据

那么接下来就是使用layui中的编辑监听事件进行对数据的处理判断

Layui数据表格判断编辑输入的值,是否为我需要的类型详解

我这里有2个if判断,第一个是用于判断用户输入的值是否大于库存,如果是,则执行

第二个是如果用户输入的是字母或者是符号亦或者空(””)则执行

Layui数据表格判断编辑输入的值,是否为我需要的类型详解

Obj.update是个方法,原来修改该行数据中字段的名称,当然只是缓存的数据

所以还得使用重载,重新导入一下数据,重载中的Data就是重载回调的数据

Layui数据表格判断编辑输入的值,是否为我需要的类型详解

然后传进去后再传出来就可以了

当然第二个if判断中的方法也是一样的思路

所以再当我们去输入字母、符号的时候就会提示你“输入的数量只能为整数”

以上这篇Layui数据表格判断编辑输入的值,是否为我需要的类型详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 Javascript
javascript中简单的进制转换代码实例
Oct 26 Javascript
javascript页面动态显示时间变化示例代码
Dec 18 Javascript
详解javascript获取url信息的常见方法
Dec 19 Javascript
详解ECMAScript6入门--Class对象
Apr 27 Javascript
从setTimeout看js函数执行过程
Dec 19 Javascript
微信小程序手机号码验证功能的实例代码
Aug 28 Javascript
JavaScript常见鼠标事件与用法分析
Jan 03 Javascript
vue使用微信JS-SDK实现分享功能
Aug 23 Javascript
JS window对象简单操作完整示例
Jan 14 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
Apr 26 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
Jul 20 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 #jQuery
javascript二维数组和对象的深拷贝与浅拷贝实例分析
Oct 26 #Javascript
Layui数据表格之单元格编辑方式
Oct 26 #Javascript
layui表格设计以及数据初始化详解
Oct 26 #Javascript
LayUi数据表格自定义赋值方式
Oct 26 #Javascript
layui实现数据表格自定义数据项
Oct 26 #Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
Oct 26 #Javascript
You might like
使用sockets:从新闻组中获取文章(一)
2006/10/09 PHP
ThinkPHP学习笔记(一)ThinkPHP部署
2014/06/22 PHP
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
在网页中插入百度地图的步骤详解
2016/12/02 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
详解js类型判断
2018/05/22 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
Angular异步变同步处理方法
2018/08/13 Javascript
js中位运算的运用实例分析
2018/12/11 Javascript
Vue+Django项目部署详解
2019/05/30 Javascript
Webpack中loader打包各种文件的方法实例
2019/09/03 Javascript
jQuery实现数字华容道小游戏(实例代码)
2020/01/16 jQuery
python 解析html之BeautifulSoup
2009/07/07 Python
利用打码兔和超人打码自封装的打码类分享
2014/03/16 Python
Python中的sort()方法使用基础教程
2017/01/08 Python
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
Android分包MultiDex策略详解
2017/10/30 Python
python使用itchat库实现微信机器人(好友聊天、群聊天)
2018/01/04 Python
Python numpy实现数组合并实例(vstack,hstack)
2018/01/09 Python
Python学生成绩管理系统简洁版
2020/04/05 Python
Tensorflow实现卷积神经网络的详细代码
2018/05/24 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
python操作链表的示例代码
2020/09/27 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
2013/01/09 HTML / CSS
用HTML5制作数字时钟的教程
2015/05/11 HTML / CSS
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
伦敦香水公司:The London Perfume Company
2019/11/13 全球购物
前台接待员岗位职责
2014/01/02 职场文书
总经理助理工作职责
2014/02/06 职场文书
机关工会工作总结2015
2015/05/26 职场文书
毕业生政审意见范文
2015/06/04 职场文书
2015年秋季开学典礼校长致辞
2015/07/16 职场文书
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers