Jquery判断form表单数据是否变化


Posted in Javascript onMarch 30, 2016

本文实例为大家分享了Jquery判断form表单数据是否变化的三大步骤,供大家参考,具体内容如下

1、思路为:修改时点击一行datagrid,并进行页面跳转数据绑定,在提交form时,序列号form表单,并重新获取datagrid选中的行数据,进行数据比较。</span> 

/** 
 * 判断form内属性值是否被修改 
 * 
 * @param jsonForm 对应修改的form序列化后的json数据 
 * @param row 对应datagrid选中的数据源 
 * 
 * @Return true 存在修改项 
 *     false 不存在修改项 
 */ 
isModified:function(jsonForm,row){ 
  for(key in jsonForm){ 
    //form中存在,但数据源datagrid中不存在 
    if(row[key] == undefined){ 
      continue; 
    } 
    //form中""或null,但数据源datagrid中为null或""时,不进行比较 
    if(!((jsonForm[key] == null || jsonForm[key] == '') && (row[key] == null || row[key] == ''))){ 
      //如果值不同,则返回true 
      if(jsonForm[key] != row[key]) 
        return true; 
    } 
  } 
  return false; 
}

2、获取变化的值前后变化信息,由于项目需要记录值变更记录,并保存column中英文信息,如下:

/** 
   * 获取form被修改信息 
   * 
   * @param jsonForm 对应修改的form序列化后的json数据 
   * @param row 对应datagrid选中的数据源 
   * @param columnJSModel 为表单form中name属性中英对照js,需在update.jsp中引用此js文件 
   * 
   * @Return json 数据如:[{"updateColumn":"loanRatio","updateColName":"额比例","updateContent":"由11变更为100.00"}, 
   *     {"updateColumn":"loanQuotaTypeName","updateColName":"比例形式","updateContent":"由 卡 变更为 实物"}] 
   * 
   */ 
  getModifiedField:function(jsonForm,row,columnJSModel){ 
    var modifiedArry = []; 
    var jsonArrStr = ''; 
    for(key in jsonForm){ 
      //form中存在,但数据源datagrid中不存在 
      if(row[key] == undefined){ 
        continue; 
      } 
      //form中""或null,但数据源datagrid中为null或""时,不进行比较 
      if(!((jsonForm[key] == null || jsonForm[key] == '') && (row[key] == null || row[key] == ''))){ 
        //如果值不同,则返回true 
        if(jsonForm[key] != row[key]){ 
          var jsonObj = {}; 
           
          jsonObj.updateColumn = key; 
          jsonObj.updateColName = columnJSModel[key]; 
          jsonObj.updateContent = '由'+ row[key] + '变更为' + jsonForm[key]; 
           
          modifiedArry[modifiedArry.length] = jsonObj; 
        } 
      } 
    } 
    jsonArrStr = JSON.stringify(modifiedArry); 
    //console.log(jsonArrStr); 
    return jsonArrStr; 
  }

3、其中的columnJSModel为中英对照JS实体,ratio、qutaTypeName分别对应form中的name属性名,如下:

var policyColumn = { 
     
    ratio : '比例', 
    quotaTypeName : '比例形式' 
     
};

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
js实现的日期操作类DateTime函数代码
Mar 16 Javascript
js判断两个日期是否相等的方法
Sep 10 Javascript
JavaScript如何从listbox里同时删除多个项目
Oct 12 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
Nov 08 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
Jul 27 Javascript
Bootstrap实现默认导航栏效果
Sep 21 Javascript
jQuery 弹出层插件(推荐)
May 24 Javascript
Bootstrap实现导航栏的2种方式
Nov 28 Javascript
微信小程序  checkbox组件详解及简单实例
Jan 10 Javascript
基于JS对象创建常用方式及原理分析
Jun 28 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
May 03 Javascript
详解django模板与vue.js冲突问题
Jul 07 Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 #Javascript
javascript实现数字倒计时特效
Mar 30 #Javascript
基于javascript实现样式清新图片轮播特效
Mar 30 #Javascript
网页中JS函数自动执行常用三种方法
Mar 30 #Javascript
Jquery轮播效果实现过程解析
Mar 30 #Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
Mar 30 #Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 #Javascript
You might like
PHP5 的对象赋值机制介绍
2011/08/02 PHP
提高PHP性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
JavaScript使用cookie
2007/02/02 Javascript
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
js getElementsByTagName的简写方式
2010/06/27 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
2014/10/20 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
2016/08/20 Javascript
angular源码学习第一篇 setupModuleLoader方法
2016/10/20 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
2016/11/20 Javascript
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
2018/09/06 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
2018/09/12 Javascript
详解React之key的使用和实践
2018/09/29 Javascript
150行Node.js实现的dns代理工具
2019/08/02 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
JS如何监听div的resize事件详解
2020/12/03 Javascript
vite2.0+vue3移动端项目实战详解
2021/03/03 Vue.js
Python面向对象特殊成员
2017/04/24 Python
Python实现购物车购物小程序
2018/04/18 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
window环境pip切换国内源(pip安装异常缓慢的问题)
2019/12/31 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
Python 捕获代码中所有异常的方法
2020/08/03 Python
Python grequests模块使用场景及代码实例
2020/08/10 Python
HTML5触摸事件实现移动端简易进度条的实现方法
2018/05/04 HTML / CSS
如何用SQL语句进行模糊查找
2015/09/25 面试题
毕业生护理专业个人求职信范文
2014/01/04 职场文书
工程师岗位职责规定
2014/02/26 职场文书
机电职业生涯规划书范文
2014/03/08 职场文书
2014年民政工作总结
2014/11/26 职场文书
秋季运动会开幕词
2015/01/28 职场文书
入党函调证明材料
2015/06/19 职场文书
《总之就是很可爱》新作短篇动画《总之就是很可爱~制服~》将于2022年夏天播出
2022/04/07 日漫