jquery监控数据是否发生改变

时间：2011-04-11 来源：jomhy

在实际开发中经常会遇到数据没发生改变是，由于用户不小心点击保存，这样导致数据库的日志增大；还有数据填写好后，忘了添加保存直接关闭页面离开。这样之前的功夫又白费了。解决这些问题的办法就是：监控页面数据是否发生变化。如果发生变化，提示用户保存。如果数据未发生变化。当我们点击保存时，也不需要提交到数据库。

接下来看看解决办法：

 1 ///<reference path="jquery-1.3.2-vsdoc2.js" />
 2  (function($) {
 3     var pageDataChange = false    //默认标识页面数据未发生改变
 4     /*监控页面数据是否发生变化*/
 5     $.fn.MonitorDataChange = function(options) {
 6         var tagName = new Array('Input', 'Select', 'Textarea');
 7         var ctrlIds = [];
 8         
 9         var deafult = {
10             arrTags: tagName,   //需监控控件的tagName属性数组
11             arrCtrls: ctrlIds   //不监控的控件ID
12         };
13         var ops = $.extend(deafult, options);
14 
15         for (var i = 0; i < ops.arrTags.length; i++) {
16             $(ops.arrTags[i]).each(function() {
17                 if (ops.arrCtrls.length == 0) {
18                     $(this).bind('change', function() {
19                         pageDataChange = true;
20                     });
21                 }
22                 else {
23                     var flag = false;
24                     for (var j = 0; j < ops.arrCtrls.length; j++) {
25                         if ($(this).attr('id') == ops.arrCtrls[j]) {
26                             flag = true;
27                             break;
28                         }
29                     }
30                     if (!flag) {
31                         $(this).bind('change', function() {
32                             pageDataChange = true;
33                         });
34                     }
35                 }
36             });
37         }
38         return this;
39     };
40     /*返回页面数据是否发生变化*/
41     $.fn.getValue = function() {
42         return pageDataChange;
43     };
44 })(jQuery);