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 图片轮播(5张图片)
Dec 30 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
Jun 21 Javascript
jQuery选中select控件 无法设置selected的解决方法
Sep 01 Javascript
让人印象深刻的10个jQuery手风琴效果应用
May 08 Javascript
jquery中load方法的用法及注意事项说明
Feb 22 Javascript
javascript中的原型链深入理解
Feb 24 Javascript
jQuery实现图片向左向右切换效果的简单实例
May 18 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
Oct 14 Javascript
jquery.tableSort.js表格排序插件使用方法详解
Aug 12 Javascript
easy ui datagrid 从编辑框中获取值的方法
Feb 22 Javascript
JS函数内部属性之arguments和this实例解析
Oct 07 Javascript
vue的项目如何打包上线
Apr 13 Vue.js
基于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
php 中文和编码判断代码
2010/05/16 PHP
php下网站防IP攻击代码,超级实用
2010/10/24 PHP
php class中self,parent,this的区别以及实例介绍
2013/04/24 PHP
浅析php变量修饰符static的使用
2013/06/28 PHP
PHP微信红包API接口
2015/12/05 PHP
Yii框架防止sql注入,xss攻击与csrf攻击的方法
2016/10/18 PHP
JavaScript 空位补零实现代码
2010/02/26 Javascript
从面试题学习Javascript 面向对象(创建对象)
2012/03/30 Javascript
jQuery中clone()方法用法实例
2015/01/16 Javascript
JS实现3D图片旋转展示效果代码
2015/09/22 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
2016/06/30 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
浅谈JS中的反柯里化( uncurrying)
2017/08/17 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
2019/03/28 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
2020/01/03 Javascript
[02:00]最后,我终于出了辉耀
2018/03/27 DOTA
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
numpy ndarray 取出满足特定条件的某些行实例
2019/12/05 Python
python中的逆序遍历实例
2019/12/25 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
Python控制台实现交互式环境执行
2020/06/09 Python
Python实现验证码识别
2020/06/15 Python
Python3爬虫里关于Splash负载均衡配置详解
2020/07/10 Python
经验丰富程序员才知道的8种高级Python技巧
2020/07/27 Python
django使用channels实现通信的示例
2020/10/19 Python
python实现录音功能(可随时停止录音)
2020/10/26 Python
用python写PDF转换器的实现
2020/10/29 Python
惊艳的手工时装首饰:Migonne Gavigan
2018/02/23 全球购物
SmartBuyGlasses意大利:购买太阳镜、眼镜和隐形眼镜
2018/11/20 全球购物
阳光体育活动方案
2014/02/16 职场文书
植树节活动总结
2014/04/30 职场文书
工商管理专业自荐信
2014/06/03 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
小学二年级语文教学反思
2016/03/03 职场文书