基于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)看看解決辦法:
///<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);
接下來(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);
您可能感興趣的文章:
- jquery監(jiān)控?cái)?shù)據(jù)是否變化(修正版)
- jquery.autocomplete修改實(shí)現(xiàn)鍵盤(pán)上下鍵自動(dòng)填充示例
- jQuery scroll事件實(shí)現(xiàn)監(jiān)控滾動(dòng)條分頁(yè)示例
- 基于Jquery實(shí)現(xiàn)鍵盤(pán)按鍵監(jiān)聽(tīng)
- jquery.hotkeys監(jiān)聽(tīng)鍵盤(pán)按下事件keydown插件
- jquery 按鍵盤(pán)上的enter事件
- 打造個(gè)性化的功能強(qiáng)大的Jquery虛擬鍵盤(pán)(VirtualKeyboard)
- jQuery監(jiān)控文本框事件并作相應(yīng)處理的方法
- jQuery實(shí)現(xiàn)監(jiān)控頁(yè)面所有ajax請(qǐng)求的方法
- jQuery 監(jiān)控鍵盤(pán)一段時(shí)間沒(méi)輸入
相關(guān)文章
jquery validate 自定義驗(yàn)證方法介紹 日期驗(yàn)證
本篇文章主要是對(duì)jquery validate 自定義驗(yàn)證方法 日期驗(yàn)證進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02淺談struts1 & jquery form 文件異步上傳
下面小編就為大家?guī)?lái)一篇淺談struts1 & jquery form 文件異步上傳。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05淺談JQ中mouseover和mouseenter的區(qū)別
下面小編就為大家?guī)?lái)一篇淺談JQ中mouseover和mouseenter的區(qū)別。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。2016-09-09用JQuery在網(wǎng)頁(yè)中實(shí)現(xiàn)分隔條功能的代碼
在C/S系統(tǒng)中有專(zhuān)門(mén)的分隔條控件,很方便實(shí)現(xiàn),但在Asp.net中卻沒(méi)有。本文介紹了一種使用JQuery技術(shù)實(shí)現(xiàn)分隔條的功能2012-08-08利用jquery去掉時(shí)光軸頭尾部線條的方法實(shí)例
這篇文章主要給大家介紹了利用jquery實(shí)現(xiàn)去掉時(shí)光軸頭尾部線條的方法,文中給出了詳細(xì)的實(shí)例代碼供大家參考學(xué)習(xí),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起看看吧。2017-06-06