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


Posted in Javascript onDecember 27, 2009

下面是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; 
} 
} 
}
Javascript 相关文章推荐
Javascript 篱式条件判断
Aug 22 Javascript
来自qq的javascript面试题
Jul 24 Javascript
javascript获取web应用根目录的方法
Feb 12 Javascript
详解JS正则replace的使用方法
Mar 06 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
May 11 Javascript
JavaScript基础重点(必看)
Jul 09 Javascript
JS获取随机数和时间转换的简单实例
Jul 10 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
Oct 19 Javascript
JS返回顶部实例代码
Aug 09 Javascript
浅析Visual Studio Code断点调试Vue
Feb 27 Javascript
JavaScript对象的特性与实践应用深入详解
Dec 30 Javascript
Js类的构建与继承案例详解
Sep 15 Javascript
jQuery中的常用事件总结
Dec 27 #Javascript
jQuery 动态酷效果实现总结
Dec 27 #Javascript
javascript 清空form表单中某种元素的值
Dec 26 #Javascript
JavaScript 入门基础知识 想学习js的朋友可以参考下
Dec 26 #Javascript
十分钟打造AutoComplete自动完成效果代码
Dec 26 #Javascript
jQuery 常见开发使用技巧总结
Dec 26 #Javascript
javascript 最常用的10个自定义函数[推荐]
Dec 26 #Javascript
You might like
使用php测试硬盘写入速度示例
2014/01/27 PHP
php数组合并array_merge()函数使用注意事项
2014/06/19 PHP
PHP查找与搜索数组元素方法总结
2015/06/12 PHP
使用PHP uniqid函数生成唯一ID
2015/11/18 PHP
yii实现使用CUploadedFile上传文件的方法
2015/12/28 PHP
PHP常用函数总结(180多个)
2016/12/25 PHP
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
2010/04/13 Javascript
基于JQuery的动态删除Table表格的行和列的代码
2011/05/12 Javascript
使用jquery实现select添加实现后台权限添加的效果
2011/05/28 Javascript
JavaScript实现的一个日期格式化函数分享
2014/12/06 Javascript
使用JavaScript的AngularJS库编写hello world的方法
2015/06/23 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
JQuery实现简单的图片滑动切换特效
2015/11/22 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
2016/01/27 Javascript
基于javascript实现文字无缝滚动效果
2016/03/22 Javascript
Javascript使用function创建类的两种方法(推荐)
2016/11/19 Javascript
jQuery实现拼图小游戏(实例讲解)
2017/07/24 jQuery
js分页之前端代码实现和请求处理
2017/08/04 Javascript
详解利用Angular实现多团队模块化SPA开发框架
2017/11/27 Javascript
MVVM 双向绑定的实现代码
2018/06/21 Javascript
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
基于node+websocket+html实现腾讯课堂聊天室聊天功能
2020/03/04 Javascript
vue watch监控对象的简单方法示例
2021/01/07 Vue.js
使用Python的PIL模块来进行图片对比
2016/02/18 Python
一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
2018/04/17 Python
Django处理文件上传File Uploads的实例
2018/05/28 Python
Python爬虫运用正则表达式的方法和优缺点
2019/08/25 Python
使用pytorch完成kaggle猫狗图像识别方式
2020/01/10 Python
PyQt5实现登录页面
2020/05/30 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
美国知名女性服饰品牌:New York & Company
2017/03/23 全球购物
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
英国女性运动服品牌:Sweaty Betty
2018/11/08 全球购物
村捐赠仪式答谢词
2014/01/21 职场文书
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android