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 相关文章推荐
2007/12/23更新创意无限,简单实用(javascript log)
Dec 24 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
Jul 31 Javascript
JS定时器实例
Apr 17 Javascript
使用jquery解析XML的方法
Sep 05 Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 Javascript
JavaScript包装对象使用详解
Jul 09 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
Dec 22 Javascript
AngularJS 中文API参考手册
Jul 28 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
Dec 16 Javascript
vue通过路由实现页面刷新的方法
Jan 25 Javascript
微信小程序框架的页面布局代码
Aug 17 Javascript
vue实现随机验证码功能(完整代码)
Dec 10 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登陆页的密码处理方式分享
2013/10/14 PHP
模拟select的代码
2011/10/19 Javascript
jquery 插件学习(六)
2012/08/06 Javascript
谷歌地图打不开的解决办法
2014/08/07 Javascript
Javascript获取当前时间函数和时间操作小结
2014/10/01 Javascript
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
jquery中checkbox使用方法简单实例演示
2015/11/24 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
2016/11/25 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
浅谈目前可以使用ES10的5个新特性
2019/06/25 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
2019/12/06 Javascript
v-slot和slot、slot-scope之间相互替换实例
2020/09/04 Javascript
Python装饰器的函数式编程详解
2015/02/27 Python
Python中使用gzip模块压缩文件的简单教程
2015/04/08 Python
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
Caffe均值文件mean.binaryproto转mean.npy的方法
2018/07/09 Python
由Python编写的MySQL管理工具代码实例
2019/04/09 Python
python之信息加密题目详解
2019/06/26 Python
手机使用python操作图片文件(pydroid3)过程详解
2019/09/25 Python
Python3 Tensorlfow:增加或者减小矩阵维度的实现
2020/05/22 Python
Python析构函数__del__定义原理解析
2020/11/20 Python
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
爱尔兰最大的体育零售商:Life Style Sports
2019/06/12 全球购物
PyQt 如何创建自定义QWidget
2021/03/24 Python
精彩自我鉴定
2014/01/16 职场文书
2014年仓库工作总结
2014/11/20 职场文书
高中生毕业评语
2014/12/30 职场文书
离职感谢信怎么写
2015/01/22 职场文书
评职称个人总结
2015/03/05 职场文书
2015年暑假工作总结
2015/07/13 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
golang特有程序结构入门教程
2021/06/02 Python
德劲DE1107指针试高灵敏度全波段收音机机评
2022/04/05 无线电
Windows Server 2019 配置远程控制以及管理方法
2022/04/28 Servers