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 相关文章推荐
用js实现随机返回数组的一个元素
Aug 13 Javascript
Ext JS添加子组件的误区探讨
Jun 28 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
Aug 15 Javascript
document.addEventListener使用介绍
Mar 07 Javascript
使用jquery动态加载Js文件和Css文件
Oct 24 Javascript
学JavaScript七大注意事项【必看】
May 04 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
Dec 28 Javascript
解决vue中修改export default中脚本报一大堆错的问题
Aug 27 Javascript
layui表格内容溢出的解决方法
Sep 06 Javascript
Vue如何获取数据列表展示
Dec 11 Javascript
jQuery实现视频展示效果
May 30 jQuery
原生js实现表格循环滚动
Nov 24 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
PHP中读写文件实现代码
2011/10/20 PHP
PHP实现阳历到农历转换的类实例
2015/03/07 PHP
ThinkPHP中where()使用方法详解
2016/04/19 PHP
在Ajax中使用Flash实现跨域数据读取的实现方法
2010/12/02 Javascript
Javascript Request获取请求参数如何实现
2012/11/28 Javascript
Jquery多选框互相内容交换的实例代码
2013/07/04 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
node.js中的fs.writeFileSync方法使用说明
2014/12/14 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
2015/12/14 Javascript
jQuery简单实现中间浮窗效果
2016/09/04 Javascript
5种JavaScript脚本加载的方式
2017/01/16 Javascript
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
React Component存在的几种形式详解
2018/11/06 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
vue vant中picker组件的使用
2020/11/03 Javascript
[09:33]2015国际邀请赛第四日TOP10
2015/08/08 DOTA
PyQt5每天必学之QSplitter实现窗口分隔
2018/04/19 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
python中 * 的用法详解
2019/07/10 Python
python批量处理文件或文件夹
2020/07/28 Python
python如何通过闭包实现计算器的功能
2020/02/22 Python
AUC计算方法与Python实现代码
2020/02/28 Python
python实例化对象的具体方法
2020/06/17 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
草莓网美国官网:Strawberrynet USA
2016/12/11 全球购物
药物学专业学生的自我评价
2013/10/27 职场文书
应届生英语教师求职信
2013/11/05 职场文书
车间主管岗位职责
2013/11/14 职场文书
见习报告的格式
2014/10/31 职场文书
五年级下册复习计划
2015/01/19 职场文书
2015年考研复习计划
2015/01/19 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
销售合作意向书范本
2015/05/08 职场文书