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 相关文章推荐
jquery.post用法关于type设置问题补充
Jan 03 Javascript
JS使用getComputedStyle()方法获取CSS属性值
Apr 23 Javascript
jquery密码强度校验
Dec 02 Javascript
检查表单元素的值是否为空的实例代码
Jun 16 Javascript
全面了解JavaScript对象进阶
Jul 19 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
Dec 26 Javascript
jquery实现多次上传同一张图片
Jan 09 Javascript
Bootstrap按钮组简单实现代码
Mar 06 Javascript
JS正则替换去空格的方法
Mar 24 Javascript
JavaScript设计模式之代理模式实例分析
Jan 16 Javascript
egg.js的基本使用和调用数据库的方法示例
May 18 Javascript
Vue使用screenfull实现全屏效果
Sep 17 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
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
PHP游戏编程25个脚本代码
2011/02/08 PHP
php中mysql连接方式PDO使用详解
2015/02/25 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
JavaScript的面向对象(二)
2006/11/09 Javascript
jQuery DOM操作小结与实例
2010/01/07 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
nodejs中实现阻塞实例
2015/03/24 NodeJs
JS用斜率判断鼠标进入DIV四个方向的方法
2016/11/07 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
vue.js树形组件之删除双击增加分支实例代码
2017/02/28 Javascript
详解Webpack DLL用法以及功能
2017/07/11 Javascript
微信小程序template模板实例详解
2017/10/27 Javascript
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
2019/08/08 jQuery
Vue中函数防抖节流的理解及应用实现
2020/04/24 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
2020/11/06 Javascript
Python实现的下载8000首儿歌的代码分享
2014/11/21 Python
python类的继承实例详解
2017/03/30 Python
Python构建XML树结构的方法示例
2017/06/30 Python
Windows下安装Scrapy
2018/10/17 Python
python利用多种方式来统计词频(单词个数)
2019/05/27 Python
Python空间数据处理之GDAL读写遥感图像
2019/08/01 Python
pytorch 数据处理:定义自己的数据集合实例
2019/12/31 Python
详解python中groupby函数通俗易懂
2020/05/14 Python
介绍一下linux的文件系统
2012/03/20 面试题
班主任工作经验交流材料
2014/05/13 职场文书
简单租房协议书范本
2014/08/20 职场文书
领导班子四风对照检查材料
2014/09/23 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
博物馆观后感
2015/06/05 职场文书
又涨知识了,自律到底多重要?
2019/06/27 职场文书
《悲惨世界》:比天空更广阔的是人的心灵
2020/01/16 职场文书