Jquery を使用して編集可能なテーブルを実装し、AJAX を使用してサーバーに送信して data_jquery を変更します。

次は js コードです:

コードをコピーします コードは次のとおりです:

$ (function() { // ページの body タグに onload イベントを追加するのと同等
$(".caname").click(function() { // クリック関数を追加ページ内の caname クラスのタグ
var objTD = $(this);
var oldText = $.trim(objTD.text()); // 古いカテゴリ名を保存します
var input = $ (""); // テキスト ボックスの HTML コード
objTD.html(input); // 現在の td の内容は次のようになります。テキストボックス
// テキストボックスを設定します クリックイベントは無効です
input.click(function() {
return false;
});テキストボックス
input.css("border-width", "0px"); //境界線は 0
input.height(objTD.height()); //テキストボックスの高さは現在の td セルの高さ
input.width(objTD.width()) ; // 幅は現在の td セルの幅です
input.css("font-size", "14px"); // テキスト ボックスのコンテンツのテキスト サイズは 14 ピクセルです。
input.css("text-align ", "center") // テキストを中央に配置します
input.trigger("focus").trigger(" select"); // すべて選択
// テキスト ボックスがフォーカスを失うと、テキストに戻ります
input.blur(function() {
var newText = $(this).val() ; // 変更された名前
var input_blur = $(this);
// 古いカテゴリとして データ送信操作は、名前が変更された名前と異なる場合にのみ実行されます
if (oldText != newText ) {
// カテゴリ名に対応する ID (シリアル番号) を取得します
var caid = $.trim (objTD.prev().text());
// AJAX はデータベースを非同期的に変更します
var url = "../handler/ChangeCaName.ashx?caname=" encodeURI(encodeURI(newText)) "&caid= " caid "&t=" new Date().getTime(); (url, function(data) {
if (data == "false") {
$("#test ").text("カテゴリの変更に失敗しました。カテゴリ名が重複していないか確認してください!") ;
input_blur.trigger("focus").trigger("select"); // すべてのテキスト ボックスを選択します
} else {
$("#test").text(""); 🎜>objTD.html(newText);
}
});
} else {
// 前後のテキストは同じです、テキストボックスをラベルにします
objTD .html(newText);
}
});
// テキスト ボックスでキーボードのキーを押します。
input.keydown( function(event) {
var jianzhi = events.keyCode ;
var input_keydown = $(this);
switch (jianzhi) {
case 13: // Enter キーを押して変更します。結果の値はデータベースに送信されます
// $(" #test").text("押したキーの値は次のとおりです: " jianzhi);
var newText = input_keydown.val(); // 変更後のシリアル番号の名前)
var caid = $.trim (objTD.prev().text());
// AJAX はデータベースを非同期的に変更します
var url = "../handler/ChangeCaName.ashx?caname= " encodeURI(encodeURI(newText)) "&caid =" caid "&t=" new Date().getTime();
$.get(url, function(data) {
if (data == "false ") {
$("# test").text("カテゴリの変更に失敗しました。カテゴリ名が重複していないか確認してください!");
input_keydown.trigger("focus").trigger("select"); // すべてのテキストボックスを選択
} else {
$("#test").text("");
}
}); // 前後のテキストを同じにし、テキスト ボックスをラベルにします
objTD.html(newText)
break
case 27: // Esc キーを押してキャンセルします。変更してテキスト ボックスをラベル
$("#test").text("");
break
}
} );
});
});

// シールド Enter キー
$(document).keydown(event) {
switch (event.keyCode)
ケース 13: false を返す;
}
});



これは一般的なハンドラー コードです。ChangeCaName.ashx





コードをコピーします

コードは次のとおりです:
<%@ WebHandler Language="C#" Class="ChangeCaName" % >
using System;

using BLL; public class ChangeCaName : IHttpHandler public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string caid = context.Request.QueryString["caid"]; string caname = context.Server.UrlDecode(context. Request.QueryString["caname"]);

// 同じ名前のカテゴリがデータベースに存在するかどうかを判断します

if (new categoryManager().IsExists(caname))
{
context.Response.Write(" false");
return;
}
// データベース カテゴリ名を変更します
Category ca = new category(caid, caname);カテゴリマネージャー().Update(ca );
if (b)
{
context.Response.Write("true");
else
{
コンテキスト.Response.Write("false ");
}
}
public bool IsReusable
{
get
{
return
}
}
}