编程 Javascript

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

Posted in Javascript onOctober 26, 2019

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

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

比如我项目中的表格

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

- Author -

唐鑫tx

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级

Oct 14 Javascript

JavaScript快速检测浏览器对CSS3特性的支持情况

Sep 26 Javascript

jQuery实现的动态伸缩导航菜单实例

May 07 Javascript

jQuery 遍历函数详解

Jul 05 Javascript

EasyUi中的Combogrid 实现分页和动态搜索远程数据

Apr 01 Javascript

50 个 jQuery 插件可将你的网站带到另外一个高度

Apr 26 Javascript

Three.js学习之网格

Aug 10 Javascript

H5上传本地图片并预览功能

May 08 Javascript

Angular2 父子组件通信方式的示例

Jan 29 Javascript

Vuex新手的理解与使用详解

May 31 Javascript

javascript跳转与返回和刷新页面的实例代码

Nov 20 Javascript

Webpack5正式发布,有哪些新特性

Oct 12 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

我的论坛源代码(七)

2006/10/09 PHP

扩展你的 PHP 之入门篇

2006/12/04 PHP

php图片验证码代码

2008/03/27 PHP

php minixml详解

2008/07/19 PHP

PHP修改session_id示例代码

2014/01/08 PHP

Open and Print a Word Document

2007/06/15 Javascript

JScript 脚本实现文件下载一般用于下载木马

2009/10/29 Javascript

图片上传插件jquery.uploadify详解

2013/11/15 Javascript

JS阻止用户多次提交示例代码

2014/03/26 Javascript

Javascript BOM学习小结(六)

2015/11/26 Javascript

深入浅析JavaScript中的arguments对象(强力推荐)

2016/06/03 Javascript

iview在vue-cli3如何按需加载的方法

2018/10/31 Javascript

vue实现的网易云音乐在线播放和下载功能案例

2019/02/18 Javascript

vue-cli2与vue-cli3在一台电脑共存的实现方法

2019/09/25 Javascript

原生javascript中this几种常见用法总结

2020/02/24 Javascript

Vue 构造选项 - 进阶使用说明

2020/08/14 Javascript

[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场

2014/05/24 DOTA

[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局

2016/02/28 DOTA

用python分割TXT文件成4K的TXT文件

2009/05/23 Python

Python通过PIL获取图片主要颜色并和颜色库进行对比的方法

2015/03/19 Python

Python 爬虫爬取指定博客的所有文章

2016/02/17 Python

Python使用win32com实现的模拟浏览器功能示例

2017/07/13 Python

浅谈python写入大量文件的问题

2018/11/09 Python

Python中xml和json格式相互转换操作示例

2018/12/05 Python

Python一键安装全部依赖包的方法

2019/08/12 Python

Python 根据数据模板创建shapefile的实现

2019/11/26 Python

Python无头爬虫下载文件的实现

2020/04/02 Python

keras 两种训练模型方式详解fit和fit_generator(节省内存)

2020/07/03 Python

CSS3教程:边框属性border的极致应用

2009/04/02 HTML / CSS

数组越界问题

2015/10/21 面试题

建材投资建议书

2014/05/16 职场文书

2014年音乐教师工作总结

2014/12/03 职场文书

2015年学校信息技术工作总结

2015/05/25 职场文书

2016年秋季运动会通讯稿

2015/11/25 职场文书

vue首次渲染全过程

2021/04/21 Vue.js

基于Android10渲染Surface的创建过程

2022/08/14 Java/Android