编程 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 相关文章推荐

Javascript中的回调函数和匿名函数的回调示例介绍

May 12 Javascript

我的Node.js学习之路（二）NPM模块管理

Jul 06 Javascript

用js传递value默认值的示例代码

Sep 11 Javascript

JavaScript中双叹号!!作用示例介绍

Sep 21 Javascript

js倒计时简单实现方法

Dec 17 Javascript

Js与Jq获取浏览器和对象值的方法

Mar 18 Javascript

Three.js学习之几何形状

Aug 01 Javascript

node.js学习之交互式解释器REPL详解

Dec 08 Javascript

JavaScript实现水平进度条拖拽效果

Jan 18 Javascript

JS实现移动端实时监听输入框变化的实例代码

Apr 12 Javascript

vue+element-ui+axios实现图片上传

Aug 20 Javascript

JS检测浏览器开发者工具是否打开的方法详解

Oct 02 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 分库分表hash算法

2009/11/12 PHP

详解Yii2.0使用AR联表查询实例

2017/06/16 PHP

laravel在中间件内生成参数并且传递到控制器中的2种姿势

2019/10/15 PHP

thinkphp5 框架结合plupload实现图片批量上传功能示例

2020/04/04 PHP

锋利的jQuery 要点归纳（三） jQuery中的事件和动画（上：事件篇）

2010/03/24 Javascript

js导出table数据到excel即导出为EXCEL文档的方法

2013/10/10 Javascript

javascript和jquery实现设置和移除文本框默认值效果代码

2015/01/13 Javascript

Javascript 拖拽的一些简单的应用(逐行分析代码，让你轻松了拖拽的原理)

2015/01/23 Javascript

JS实现控制表格单元格垂直对齐的方法

2015/03/30 Javascript

AngularJS全局scope与Isolate scope通信用法示例

2016/11/22 Javascript

jQuery滑动到底部加载下一页数据的实例代码

2017/05/22 jQuery

浅谈vue2 单页面如何设置网页title

2017/11/08 Javascript

微信小程序实战篇之购物车的实现代码示例

2017/11/30 Javascript

jQuery插件实现的日历功能示例【附源码下载】

2018/09/07 jQuery

详解js模板引擎art template数组渲染的方法

2018/10/09 Javascript

基于node简单实现RSA加解密的方法步骤

2019/03/21 Javascript

如何在JavaScript中正确处理变量

2020/12/25 Javascript

Python中shutil模块的常用文件操作函数用法示例

2016/07/05 Python

Python机器学习库scikit-learn安装与基本使用教程

2018/06/25 Python

Windows下python3.7安装教程

2018/07/31 Python

python实现简单登陆系统

2018/10/18 Python

Python3 Tkinter选择路径功能的实现方法

2019/06/14 Python

pycharm设置当前工作目录的操作(working directory)

2020/02/14 Python

美国著名的户外用品品牌：L.L.Bean

2018/01/05 全球购物

Expedia韩国官网：亚洲发展最快的在线旅游门户网站

2018/02/26 全球购物

成都思必达公司C#程序员招聘面试题

2013/06/26 面试题

数学高效课堂实施方案

2014/03/29 职场文书

幼儿园爱国卫生月活动总结

2014/06/30 职场文书

关于十八大的演讲稿

2014/09/15 职场文书

离婚协议书标准格式

2014/10/04 职场文书

服务整改报告

2014/11/06 职场文书

大学生个人总结范文

2015/02/15 职场文书

介绍信格式样本

2015/05/05 职场文书

法律服务所工作总结

2015/08/10 职场文书

小学秋季运动会加油口号及加油稿

2019/08/19 职场文书

教你怎么用Python操作MySql数据库

2021/05/31 Python