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

Javascript
JavaScript 序列化对象实现代码
替代window.event.srcElement效果的可兼容性的函数
div+css+js模拟tab切换效果 事件绑定 IE,firefox兼容
IE和Firefox下event事件杂谈
javascript option onclick事件ie解决方案 兼容ie,firefox
javascript demo 基本技巧
用js实现层随着内容大小动态渐变改变 推荐
JS 的应用开发初探(mootools)
JS 在数组插入字符的实现代码(可参考JavaScript splice() 方法)
JQuery Tips(4) 一些关于提高JQuery性能的Tips
jQuery 淡入淡出、展开收缩菜单实现代码
js控制div及网页相关属性的代码
javascript 翻页测试页(动态创建标签并自动翻页)
Js获取table当前tr行的值的代码
IE 上下滚动展示模仿Marquee机制
jQuery解决iframe高度自适应代码
jQuery 连续列表实现代码
利用jQuery的$.event.fix函数统一浏览器event事件处理
Javascript和Ajax中文乱码吐血版解决方案
js Firefox 加入收藏夹功能代码 兼容Firefox 和 IE

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 123 ::
收藏到网摘: 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;
}
}
}