以下为王翔经验总结,转载请注明本博客地址,谢谢!
完整的操作流程:
1:点击类别名称,赋给一个onclick事件。
2:文字内容变成一个输入框,并且类别名称显示在输入框中。
3:修改输入框的内容。
4:点击页面其他地方时,输入框重新变回为文字,并且将用新输入的类别名取代之前的旧类别名。
5:并将新的类别名更新到数据库,完成整个过程。
aspx的页面代码如下,注意类别名要加一个class="canme",才方便用jquery来获取:
首先,在Web层新建一个js文件,拷贝如下代码:
然后在Web层下新建一个文件夹(handler),在其下新建一个“一般处理程序”,也就是后缀为ashx的文件,拷贝以下代码:
完整的操作流程:
1:点击类别名称,赋给一个onclick事件。
2:文字内容变成一个输入框,并且类别名称显示在输入框中。
3:修改输入框的内容。
4:点击页面其他地方时,输入框重新变回为文字,并且将用新输入的类别名取代之前的旧类别名。
5:并将新的类别名更新到数据库,完成整个过程。
aspx的页面代码如下,注意类别名要加一个class="canme",才方便用jquery来获取:
<tr>
<td height="25" align="center"><%# Eval("id") %></td>
<td height="25" align="center" class="caname"><%# Eval("name") %></td>
<tr>
<td height="25" align="center"><%# Eval("id") %></td>
<td height="25" align="center" class="caname"><%# Eval("name") %></td>
<tr>
首先,在Web层新建一个js文件,拷贝如下代码:
Code
/**//*
* 说明:用Jquery的方法,无刷新页面,编辑表格
*/
$(function() {
//给页面中有caname类的标签上加上click函数
$(".caname").click(function() {
var objTD = $(this);
//先将老的类别名称保存起来,并用trim方法去掉左右多余的空格
var oldText = $.trim(objTD.text());
//构造一个input的标签对象(作用是为了让这个input失效,不然点击多次后,文字会消失)
var input = $("<input type='text' value='" + oldText + "' />");
//当前td的内容变为文本框,并且把老类别名放进去
objTD.html(input);
//设置文本框的点击事件失效
input.click(function() {
return false;
});
//设置文本框样式,让界面显示的人性化点
input.css("font-size", "16px");
input.css("text-align", "center");
input.css("background-color", "#F7F2DE");
input.width("120px");
//自动选中文本框中的文字
input.select();
//文本框失去焦点时重新变为文本
input.blur(function() {
//获得新输入的类别名
var newText = $(this).val();
//当老类别名与修改后的类别名不同时才进行数据提交操作
if (oldText != newText) {
//获取该类别名所对应的ID(caId)
var caId = objTD.prev().text();
//将新的类别名进行转码,不然界面以及数据库显示的都是"???"这样的乱码
newText2 = escape(newText);
//获取要传到"一般处理文件"(ChangeCaName.ashx)中的URL
var url = "../handler/ChangeCaName.ashx?caid=" + caId + "&caname=" + newText2;
//AJAX异步更改数据库,data为成功后的回调返回值,用于判断结果提示
$.get(url, function(data) {
if (data == "false") {
//alert("类别修改失败,重复的类别名!");
$("#div_id_msg").text("类别修改失败,重复的类别名!");
}
else {
//用新的类别名文字替换之前变过来的输入框状态
objTD.html(newText);
$("#div_id_msg").text("");
alert("类别修改成功!");
}
});
} else {
//新旧类别名都一样时,
objTD.html(newText);
}
});
});
});
/**//*
* 说明:用Jquery的方法,无刷新页面,编辑表格
*/
$(function() {
//给页面中有caname类的标签上加上click函数
$(".caname").click(function() {
var objTD = $(this);
//先将老的类别名称保存起来,并用trim方法去掉左右多余的空格
var oldText = $.trim(objTD.text());
//构造一个input的标签对象(作用是为了让这个input失效,不然点击多次后,文字会消失)
var input = $("<input type='text' value='" + oldText + "' />");
//当前td的内容变为文本框,并且把老类别名放进去
objTD.html(input);
//设置文本框的点击事件失效
input.click(function() {
return false;
});
//设置文本框样式,让界面显示的人性化点
input.css("font-size", "16px");
input.css("text-align", "center");
input.css("background-color", "#F7F2DE");
input.width("120px");
//自动选中文本框中的文字
input.select();
//文本框失去焦点时重新变为文本
input.blur(function() {
//获得新输入的类别名
var newText = $(this).val();
//当老类别名与修改后的类别名不同时才进行数据提交操作
if (oldText != newText) {
//获取该类别名所对应的ID(caId)
var caId = objTD.prev().text();
//将新的类别名进行转码,不然界面以及数据库显示的都是"???"这样的乱码
newText2 = escape(newText);
//获取要传到"一般处理文件"(ChangeCaName.ashx)中的URL
var url = "../handler/ChangeCaName.ashx?caid=" + caId + "&caname=" + newText2;
//AJAX异步更改数据库,data为成功后的回调返回值,用于判断结果提示
$.get(url, function(data) {
if (data == "false") {
//alert("类别修改失败,重复的类别名!");
$("#div_id_msg").text("类别修改失败,重复的类别名!");
}
else {
//用新的类别名文字替换之前变过来的输入框状态
objTD.html(newText);
$("#div_id_msg").text("");
alert("类别修改成功!");
}
});
} else {
//新旧类别名都一样时,
objTD.html(newText);
}
});
});
});
然后在Web层下新建一个文件夹(handler),在其下新建一个“一般处理程序”,也就是后缀为ashx的文件,拷贝以下代码:
Code
<%@ WebHandler Language="C#" Class="ChangeCaName" %>
using System;
using System.Web;
using BLL;
using Model;
public class ChangeCaName : IHttpHandler {
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//从js传来的URL中获取值
string caname = context.Request.QueryString["caname"];
string caId = context.Request.QueryString["caid"];
//判断是据库中是否已存在同名类别
if (!CategoryManager.IsExists(caname))
{
//更改数据库的类别名
Category ca = new Category(caId, caname);
if (CategoryManager.Edit(ca))
{
context.Response.Write("类别修改成功!");
}
else
{
context.Response.Write("类别修改失败!");
}
}
else
{
context.Response.Write("类别名已存在!");
return;
}
}
public bool IsReusable {
get {
return false;
}
}
}
ok了,就是这些,试试看。
<%@ WebHandler Language="C#" Class="ChangeCaName" %>
using System;
using System.Web;
using BLL;
using Model;
public class ChangeCaName : IHttpHandler {
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//从js传来的URL中获取值
string caname = context.Request.QueryString["caname"];
string caId = context.Request.QueryString["caid"];
//判断是据库中是否已存在同名类别
if (!CategoryManager.IsExists(caname))
{
//更改数据库的类别名
Category ca = new Category(caId, caname);
if (CategoryManager.Edit(ca))
{
context.Response.Write("类别修改成功!");
}
else
{
context.Response.Write("类别修改失败!");
}
}
else
{
context.Response.Write("类别名已存在!");
return;
}
}
public bool IsReusable {
get {
return false;
}
}
}