DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery 應用代碼 方便的排序功能
jquery 應用代碼 方便的排序功能
編輯:JQuery特效代碼     
終極目的:想做一個方便的排序功能。
具體實現:點擊後可以輸入排序的數字編號,移開後自動更新數據庫。

1,我想把這個功能用<span>來完成,也就需要一個在頁面上監控指定的span的東西,他就是:
ready(fn)當DOM載入就緒可以查詢及操縱時綁定一個要執行的函數。
$(document).ready(function(){
// 在這裡寫你的代碼...
});
2,頁面上<span>很多,如何才能區分呢?用id?還是class?id太單一,於是用class,因為排序不是針對一條數據,而是多條。
<span class="BY">3</span><br /><BR><span class="BY">2</span><br /><BR><span class="BY">1</span><br /><BR><span class="BY">0</span><br />

3,綁定的事件我想肯定是click
$(document).ready(function(){<BR> $(".BY").click(function() {<BR> alert('測試下先');<BR> });<BR><BR>}); <BR>
4,然後要讓span變成一個輸入框才行,go
代碼如下:
$(document).ready(function(){
$(".BY").click(function() {
var old = $(this).text();
var o = $(this);
o.html("<input class=\"OnBY\" type=\"text\" value=\"" + old + "\"/>");
});
});

5,這時發現了一個 問題,無法點擊的。點了之後數字沒了。因此就無法輸入更改了。想個什麼辦法呢?還記得自動獲取選擇麼?
代碼如下:
$(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,很簡單的可以更改了。不過當鼠標移開的時候,不能變回去了。郁悶,咋整?
代碼如下:
$(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());
});
});
});

用失去焦點函數,把html代碼替換回來就是。換回來的還是修改的值。
7,不過 不能更數據庫交涉,接下來就要用到ajax。看看。
代碼如下:
$(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參數提交給Admin_BY.aspx處理,後台的處理我就不多說了。用Requst.QueryString來獲取。
8,再改進一下,排序肯定要指定一個數據ID

<span class="BY" DbID="3" title="點擊修改">3</span><br />
<span class="BY" DbID="2" title="點擊修改">2</span><br />
<span class="BY" DbID="1" title="點擊修改">1</span><br />
<span class="BY" DbID="0" title="點擊修改">0</span><br />

代碼如下:
$(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("發生錯誤: " + msg);
o.html(old);
}
}
});
});
});
});

還有更多想法,等有空再增加上去。比如修改時,數據處理有個時間,在等待的時間裡,改變下鼠標樣式為繁忙等。
或更新後,重新裝載數據,因為具體數據不同,只能具體應用。也或者直接刷新頁面。

初學原創,請各位高手不吝賜教。
Kas

PS:關於ERic Poon 兄弟說何處用到,抓個圖參考下吧。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved