快捷導(dǎo)航

jquery 應(yīng)用代碼方便的排序功能

更新時間：2010年02月06日 15:59:43 作者：

點擊后可以輸入排序的數(shù)字編號，移開后自動更新數(shù)據(jù)庫。

終極目的：想做一個方便的排序功能。
具體實現(xiàn)：點擊后可以輸入排序的數(shù)字編號，移開后自動更新數(shù)據(jù)庫。

1，我想把這個功能用來完成，也就需要一個在頁面上監(jiān)控指定的span的東西，他就是：
ready(fn)當(dāng)DOM載入就緒可以查詢及操縱時綁定一個要執(zhí)行的函數(shù)。
$(document).ready(function(){
// 在這里寫你的代碼...
});
2，頁面上很多，如何才能區(qū)分呢？用id？還是class？id太單一，于是用class，因為排序不是針對一條數(shù)據(jù)，而是多條。
3 2 1 0 

3，綁定的事件我想肯定是click
$(document).ready(function(){ $(".BY").click(function() { alert('測試下先'); }); }); 
4，然后要讓span變成一個輸入框才行，go

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

 
$(document).ready(function(){ 
$(".BY").click(function() { 
var old = $(this).text(); 
var o = $(this); 
o.html("<input class=\"OnBY\" type=\"text\" value=\"" + old + "\"/>"); 
}); 
}); 

5，這時發(fā)現(xiàn)了一個問題，無法點擊的。點了之后數(shù)字沒了。因此就無法輸入更改了。想個什么辦法呢？還記得自動獲取選擇么？

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

 
$(document).ready(function(){ 
$(".BY").click(function() { 
var old = $(this).text(); 
var o = $(this); 
o.html("<input class=\"OnBY\" type=\"text\" onMouseOver=\"this.select();\" value=\"" + old + "\"/>"); 
}); 
}); 

6，很簡單的可以更改了。不過當(dāng)鼠標(biāo)移開的時候，不能變回去了。郁悶，咋整？

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

 
$(document).ready(function(){ 
$(".BY").click(function() { 
var old = $(this).text(); 
var o = $(this); 
o.html("<input class=\"OnBY\" type=\"text\" onMouseOver=\"this.select();\" value=\"" + old + "\"/>"); 
$(".OnBY").blur(function() { 
o.html($(".OnBY").val()); 
}); 
}); 
}); 

用失去焦點函數(shù)，把html代碼替換回來就是。換回來的還是修改的值。
7，不過不能更數(shù)據(jù)庫交涉，接下來就要用到ajax?？纯础?

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

 
$(document).ready(function(){ 
$(".BY").click(function() { 
var old = $(this).text(); 
var o = $(this); 
o.html("<input class=\"OnBY\" type=\"text\" onMouseOver=\"this.select();\" value=\"" + old + "\"/>"); 
$(".OnBY").blur(function() { 
$.ajax({ 
type: "GET", 
url: "Admin_BY.aspx", 
data: "BY=" + $(".OnBY").val(), 
success: function(msg) { 
alert(msg); 
o.html($(".OnBY").val()); 
} 
}); 
}); 
}); 
}); 

把修改的By參數(shù)提交給Admin_BY.aspx處理，后臺的處理我就不多說了。用Requst.QueryString來獲取。
8，再改進一下，排序肯定要指定一個數(shù)據(jù)ID

3 
2 
1 
0

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

 
$(document).ready(function(){ 
$(".BY").click(function() { 
var old = $(this).text(); 
var o = $(this); 
o.html("<input class=\"OnBY\" type=\"text\" onMouseOver=\"this.select();\" value=\"" + old + "\"/>"); 
$(".OnBY").blur(function() { 
$.ajax({ 
type: "GET", 
url: "Admin_BY.aspx", 
data: "ID=" + o.attr("BYID") + "&BY=" + $(".OnBY").val(), 
success: function(msg) { 
if (msg.indexOf("[BYNOK]")>0) { 
o.html($(".OnBY").val()); 
} else { 
alert("發(fā)生錯誤： " + msg); 
o.html(old); 
} 
} 
}); 
}); 
}); 
}); 

還有更多想法，等有空再增加上去。比如修改時，數(shù)據(jù)處理有個時間，在等待的時間里，改變下鼠標(biāo)樣式為繁忙等。
或更新后，重新裝載數(shù)據(jù)，因為具體數(shù)據(jù)不同，只能具體應(yīng)用。也或者直接刷新頁面。

初學(xué)原創(chuàng)，請各位高手不吝賜教。
Kas

PS：關(guān)于ERic Poon 兄弟說何處用到，抓個圖參考下吧。