ホームページ > ウェブフロントエンド > jsチュートリアル > jqueryアプリケーションコード便利なソート関数_jquery

jqueryアプリケーションコード便利なソート関数_jquery

WBOY
リリース: 2016-05-16 18:35:24
オリジナル
929 人が閲覧しました

最終目標:便利なソート機能を作りたい。
具体的な実装: クリック後、ソートされた数値を入力すると、移動後にデータベースが自動的に更新されます。

1. この関数を完了するには、ページ上の指定されたスパンを監視するものも必要です。
ready(fn)。クエリおよび操作時に実行される関数をバインドできます。
$(document).ready(function(){
// ここにコードを記述してください...
});
2. ページには がたくさんあります。毛織物と区別しますか? IDを使用しますか?それともクラス? idが単一すぎるため、ソートが1つのデータではなく複数のデータに対して行われるため、classを使用します。
3

2

;BR>1

0


3. バインドされたイベントは click
$(document).ready(function(){
$(".BY").click(function() {
;alert('Test first');
});


4 を入力ボックスに入れる必要があります。 🎜>

コードをコピー コードは次のとおりです:
$(document).ready(function() {
$(".BY").click(function() {
var old = $(this).text();
var o = $(this);
o.html ( "")
})


5 , この時、問題が見つかりクリックできなくなりました。クリックすると数字が消えてしまいました。したがって、変更を入力することはできません。何が考えられますか?選択範囲が自動的に取得されたことを覚えていますか?


$(document).ready(function( ){
$(".BY").click(function() {
var old = $(this).text();
var o = $(this);
o. html(" }); ;


6、変更は非常に簡単です。ただし、マウスを遠ざけると、元に戻すことはできません。落ち込んでいます、どうすればいいですか?



コードをコピー
コードは次のとおりです。 $(document).ready(function( ){ $(".BY").click(function() {
var old = $(this).text();
var o = $(this);
o. html(" "); Blur(function () {
o.html($(".OnBY").val());
})

;
ロストフォーカス関数を使用して、HTML コードを元に戻します。返されるのは変更された値です。
7 ですが、データベースを更新できないため、次に ajax が使用されます。見てください。



コードをコピー


コードは次のとおりです。$.ajax({
type: "GET",
url: "Admin_BY.aspx",
data: "BY=" $(".OnBY") .val( ),
成功: function(msg) {
alert(msg)
o.html($(".OnBY").val()); });
});
});


処理のために、変更した By パラメーターを送信します。バックグラウンド処理。 Requst.QueryString を使用して取得します。
8. 並べ替えにはデータ ID を指定する必要があります。

32
1

0



コードをコピー


コードは次のとおりです。

$(document).ready(function(){
$(".BY").click(function() {
var old = $(this).text();
var o = $(this);
o.html(" ;");
$(".OnBY").blur(function() {
$.ajax({
タイプ: "GET",
url: "Admin_BY.aspx",
データ: "ID=" o.attr("BYID") "&BY=" $(".OnBY").val(),
成功: function(msg) {
if (msg.indexOf) ("[BYNOK]")>0) {
o.html($(".OnBY").val());
} else {
alert("エラーが発生しました: " msg ) ;
o.html(古い);
}
});
他にもアイデアがあるので、時間があれば追加します。たとえば、変更する場合、待ち時間中にマウスのスタイルをビジーに変更するなどのデータ処理の時間が発生します。
または、更新後にデータをリロードしてください。特定のデータが異なるため、特定のみ適用できます。または、ページを直接更新します。

初心者の方、アドバイスをお願いします。
Kas

追伸: ERic Poon について兄弟は、それをどこで使用するか、参考用に写真を撮ってくださいと言いました。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート