当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 用Jquery实现可编辑表格并用AJAX提交到服务器修改数据

Javascript
颜色变换 像字符逐字输入的欢迎词
CSS 伪类实现的鼠标滑动图片链接
百度用到的Js日历 大家可以看看
CSS 渐变背景的6个演示代码
Jquery 弹出层插件实现代码
Javascript 模式实例 观察者模式
[原创]javascript 指定区域内图片等比例缩放实现代码 脚本之家整合版
javascript window对象属性整理
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
用JavaScript实现 铁甲无敌奖门人 “开口中”猜数游戏
理解 JavaScript 预解析
理解JavaScript变量作用域更轻松
JavaScript的变量作用域深入理解
javascript写的一个链表实现代码
Js 打字效果 逐一出现的文字
javascript 走马灯效果的链接提示
CSS 动态链接提示
JavaScript 事件的一些重要说明
JavaScript 三种不同位置代码的写法

Javascript 中的 用Jquery实现可编辑表格并用AJAX提交到服务器修改数据


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 178 ::
收藏到网摘: n/a

使用Jquery实现可编辑的表格 并使用AJAX提交到服务器修改数据的实现代码。 下面是js Code:
复制代码 代码如下:

$(function() { // 相当于在页面中的body标签加上onload事件
$(".caname").click(function() { // 给页面中有caname类的标签加上click函数
var objTD = $(this);
var oldText = $.trim(objTD.text()); // 保存老的类别名称
var input = $("<input type='text' value='" + oldText + "' />"); // 文本框的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: // 按下回车键 ,把修改后的值提交到数据库
// $("#test").text("您按下的键值是: " + jianzhi);
var newText = input_keydown.val(); // 修改后的名称
// 当老的类别名称与修改后的名称不同的时候才进行数据的提交操作
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_keydown.trigger("focus").trigger("select"); // 文本框全选
} else {
$("#test").text("");
objTD.html(newText);
}
});
} else {
// 前后文本一致,把文本框变成标签
objTD.html(newText);
}
break;
case 27: // 按下Esc键, 取消修改,把文本框变成标签
$("#test").text("");
objTD.html(oldText);
break;
}
});
});
});
// 屏蔽Enter按键
$(document).keydown(function(event) {
switch (event.keyCode) {
case 13: return false;
}
});

下面是 一般处理程序代码 ChangeCaName.ashx
复制代码 代码如下:

<%@ 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";
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);
bool b = new CategoryManager().Update(ca);
if (b)
{
context.Response.Write("true");
}
else
{
context.Response.Write("false");
}
}
public bool IsReusable
{
get
{
return false;
}
}
}