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的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
Oct 10 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Jan 21 Javascript
使用Node.js为其他程序编写扩展的基本方法
Jun 23 Javascript
jQuery实现的多级下拉菜单效果代码
Aug 24 Javascript
使用ajaxfileupload.js实现上传文件功能
Aug 13 Javascript
jQuery中each方法的使用详解
Mar 18 jQuery
前端Electron新手入门教程详解
Jun 21 Javascript
layer.confirm()右边按钮实现href的例子
Sep 27 Javascript
vue 强制组件重新渲染(重置)的两种方案
Oct 29 Javascript
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
vue实现div可拖动位置也可改变盒子大小的原理
Sep 16 Javascript
原生JS实现音乐播放器的示例代码
Feb 25 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入门教程 精简版
2009/12/13 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
php简单复制文件的方法
2016/05/09 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
2013/09/25 Javascript
JS获取图片高度宽度的方法分享
2015/04/17 Javascript
详解Javascript模板引擎mustache.js
2016/01/20 Javascript
javascript基本算法汇总
2016/03/09 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
基于vue.js实现侧边菜单栏
2017/03/20 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
用npm-run实现自动化任务的方法示例
2019/01/14 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
2019/04/22 Javascript
javascript History对象原理解析
2020/02/17 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
2020/07/20 Javascript
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
python获取本机mac地址和ip地址的方法
2015/04/29 Python
Python使用selenium实现网页用户名 密码 验证码自动登录功能
2018/05/16 Python
python安装scipy的方法步骤
2019/06/26 Python
pycharm 2019 最新激活方式(pycharm破解、激活)
2020/09/22 Python
pip安装tensorflow的坑的解决
2020/04/19 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
英国玛莎百货美国官网:Marks & Spencer美国
2018/11/06 全球购物
办公室主任先进事迹
2014/01/18 职场文书
幼儿园老师辞职信
2014/01/20 职场文书
黄继光的英雄事迹材料
2014/02/13 职场文书
小学班主任培训方案
2014/06/04 职场文书
辞职信模板(中英文版)
2015/02/27 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
好人好事新闻稿
2015/07/17 职场文书
与Windows10相比Windows11有哪些改进?值不值得升级?
2021/11/21 数码科技