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 相关文章推荐
JavaScript获取onclick、onchange等事件值的代码
Jul 22 Javascript
jQuery Animation实现CSS3动画示例介绍
Aug 14 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
Nov 29 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
Mar 31 Javascript
轻松实现Bootstrap图片轮播
Apr 20 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
Jan 18 Javascript
javascript实现标签切换代码示例
May 22 Javascript
jQuery File Upload文件上传插件使用详解
Dec 06 Javascript
原生JS实现简单的倒计时功能示例
Aug 30 Javascript
Js代码中的span拼接问题解决
Nov 22 Javascript
使用js实现单链解决前端队列问题的方法
Feb 03 Javascript
JS 图片压缩原理与实现方法详解
Apr 29 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
用php过滤危险html代码的函数
2008/07/22 PHP
php 高性能书写
2010/12/11 PHP
PHP进阶学习之类的自动加载机制原理分析
2019/06/18 PHP
Jquery操作Select 简单方便 一个js插件搞定
2009/11/12 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
JS简单实现元素复制示例附图
2013/11/19 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
js判断图片加载完成后获取图片实际宽高的方法
2016/02/25 Javascript
浅谈JavaScript中的this指针和引用知识
2016/08/05 Javascript
JS插件plupload.js实现多图上传并显示进度条
2016/11/29 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
vue的mixins属性详解
2018/03/14 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
JavaScript动态检测密码强度原理及实现方法详解
2019/06/11 Javascript
js实现的格式化数字和金额功能简单示例
2019/07/30 Javascript
vue+element树组件 实现树懒加载的过程详解
2019/10/21 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
2020/06/24 Javascript
使用paramiko远程执行命令、下发文件的实例
2017/10/01 Python
python中正则表达式的使用方法
2018/02/25 Python
python实现跨excel的工作表sheet之间的复制方法
2018/05/03 Python
python寻找list中最大值、最小值并返回其所在位置的方法
2018/06/27 Python
python 根据时间来生成唯一的字符串方法
2019/01/14 Python
html如何对span设置宽度
2019/10/30 HTML / CSS
Casadei卡萨蒂官网:意大利奢侈鞋履品牌
2017/10/28 全球购物
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
幼教个人求职信范文
2013/12/02 职场文书
房务中心文员岗位职责
2014/04/16 职场文书
项目负责人任命书
2014/06/04 职场文书
2016情人节宣传语
2015/07/14 职场文书
对Keras自带Loss Function的深入研究
2021/05/25 Python
动视暴雪取消疫苗禁令 让所有员工返回线下工作
2022/04/03 其他游戏
nginx 配置缓存
2022/05/11 Servers