基于jquery的監(jiān)控?cái)?shù)據(jù)是否發(fā)生改變

更新時(shí)間：2011年04月11日 20:46:54 作者：

在實(shí)際開(kāi)發(fā)中經(jīng)常會(huì)遇到數(shù)據(jù)沒(méi)發(fā)生改變是，由于用戶不小心點(diǎn)擊保存，這樣導(dǎo)致數(shù)據(jù)庫(kù)的日志增大；還有數(shù)據(jù)填寫(xiě)好后，忘了添加保存直接關(guān)閉頁(yè)面離開(kāi)。

這樣之前的功夫又白費(fèi)了。解決這些問(wèn)題的辦法就是：監(jiān)控頁(yè)面數(shù)據(jù)是否發(fā)生變化。如果發(fā)生變化，提示用戶保存。如果數(shù)據(jù)未發(fā)生變化。當(dāng)我們點(diǎn)擊保存時(shí)，也不需要提交到數(shù)據(jù)庫(kù)。
接下來(lái)看看解決辦法：

復(fù)制代碼代碼如下:

 
///<reference path="jquery-1.3.2-vsdoc2.js" /> 
(function($) { 
var pageDataChange = false //默認(rèn)標(biāo)識(shí)頁(yè)面數(shù)據(jù)未發(fā)生改變 
/*監(jiān)控頁(yè)面數(shù)據(jù)是否發(fā)生變化*/ 
$.fn.MonitorDataChange = function(options) { 
var tagName = new Array('Input', 'Select', 'Textarea'); 
var ctrlIds = []; 

var deafult = { 
arrTags: tagName, //需監(jiān)控控件的tagName屬性數(shù)組 
arrCtrls: ctrlIds //不監(jiān)控的控件ID 
}; 
var ops = $.extend(deafult, options); 

for (var i = 0; i < ops.arrTags.length; i++) { 
$(ops.arrTags[i]).each(function() { 
if (ops.arrCtrls.length == 0) { 
$(this).bind('change', function() { 
pageDataChange = true; 
}); 
} 
else { 
var flag = false; 
for (var j = 0; j < ops.arrCtrls.length; j++) { 
if ($(this).attr('id') == ops.arrCtrls[j]) { 
flag = true; 
break; 
} 
} 
if (!flag) { 
$(this).bind('change', function() { 
pageDataChange = true; 
}); 
} 
} 
}); 
} 
return this; 
}; 
/*返回頁(yè)面數(shù)據(jù)是否發(fā)生變化*/ 
$.fn.getValue = function() { 
return pageDataChange; 
}; 
})(jQuery); 

您可能感興趣的文章:

監(jiān)控?cái)?shù)據(jù)

相關(guān)文章

jQuery將多條數(shù)據(jù)插入模態(tài)框的示例代碼
這篇文章主要介紹了使用jQuery將多條數(shù)據(jù)插入模態(tài)框的方法,很簡(jiǎn)單，很實(shí)用，需要的朋友可以參考下
2014-09-09
jQuery實(shí)現(xiàn)jQuery-form.js實(shí)現(xiàn)異步上傳文件
jquery.form.js是一個(gè)非常強(qiáng)大的用于表單提交的插件。這篇文章主要介紹了jQuery實(shí)現(xiàn)jQuery-form.js實(shí)現(xiàn)異步上傳文件，有興趣的可以了解一下。
2017-04-04
Jquery on方法綁定事件后執(zhí)行多次的解決方法
下面小編就為大家?guī)?lái)一篇Jquery on方法綁定事件后執(zhí)行多次的解決方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-06-06
jQuery 性能優(yōu)化指南（1）
在jQuery中最快的選擇器是ID選擇器，因?yàn)樗苯觼?lái)自于JavaScript的getElementById()方法
2009-05-05
jQuery EasyUI 開(kāi)源插件套裝完全替代ExtJS
JQuery愛(ài)好者們的福音 jQuery EasyUI 開(kāi)源插件套裝完全替代ExtJS(引用)
2010-03-03
淺談jquery事件處理
這篇文章主要簡(jiǎn)單介紹了jquery事件處理，十分的實(shí)用，有需要的小伙伴可以參考下。
2015-04-04
firefox下jQuery UI Autocomplete 1.8.*中文輸入修正方法
在FF下，切換到中文輸入法，再輸入中文，是不能立即自動(dòng)查詢，需要按下其他按鍵，比如CTRL，后來(lái)，通過(guò)修改源代碼即可修復(fù)這個(gè)問(wèn)題
2012-09-09
jquery?validation驗(yàn)證電話號(hào)碼,email(實(shí)例代碼)
jquery?validation驗(yàn)證電話號(hào)碼,email(實(shí)例代碼),需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助
2013-11-11
jquery 簡(jiǎn)單應(yīng)用示例總結(jié)
jquery 想必大家早已如雷貫耳，本文整理了一些在實(shí)際應(yīng)用中比較常見(jiàn)的功能片段，感興趣的朋友可以學(xué)習(xí)下哦，需要改進(jìn)的地方希望大家不惜指教
2013-08-08
jQuery瀑布流插件Wookmark使用實(shí)例
Wookmark jQuery插件大致使用position:absolute來(lái)重構(gòu)內(nèi)容實(shí)現(xiàn)瀑布流布局,需要的朋友可以參考下
2014-04-04