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"); // 텍스트 상자의 콘텐츠 텍스트 크기는 14px입니다.
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()
$.get (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 = event.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)
}
}); // 전후의 텍스트를 동일하게 만들고 텍스트 상자를 레이블로 바꿉니다
objTD.html(newText)
}
break
case 27: // 취소하려면 Esc 키를 누르세요. 수정하고 텍스트 상자를 레이블
objTD.html(oldText)

}
}으로 변경합니다. );
});
});

// Shield Enter 키
$(document).keydown(function(event) {
switch(event.keyCode)
case 13: return false;
}
});



여기는 ChangeCaName.ashx

코드 복사
코드는 다음과 같습니다.

<%@ WebHandler Language="C#" Class="ChangeCaName" % > System.Web 사용; BLL 사용 공용 클래스 ChangeCaName : IHttpHandler { 공용 void ProcessRequest

{

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;
}
// 데이터베이스 카테고리 이름 변경
카테고리 ca = new Category(caid, caname)
bool b = new CategoryManager().Update(ca );
if (b)
{
context.Response.Write("true")
}
else
{
context .Response.Write("false ");
}
}
public bool IsReusable
{
get
{
return false;
}