用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应该怎样学
Apr 16 Javascript
js中的string.format函数代码
Aug 11 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
Aug 14 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
Dec 16 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
Apr 07 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
Sep 24 Javascript
完美实现js选项卡切换效果(二)
Mar 08 Javascript
angularjs封装$http为factory的方法
May 18 Javascript
Node.JS利用PhantomJs抓取网页入门教程
May 19 Javascript
apicloud拉起小程序并传递参数的方法示例
Nov 21 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
Sep 28 Javascript
JavaScript实现单图片上传并预览功能
Sep 30 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中PDO方式实现数据库的增删改查
2015/05/17 PHP
PHP调试的强悍利器之PHPDBG
2016/02/22 PHP
激活 ActiveX 控件
2006/10/09 Javascript
js技巧--转义符&quot;\&quot;的妙用
2007/01/09 Javascript
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
JavaScript 函数式编程的原理
2009/10/16 Javascript
javascript的数据类型、字面量、变量介绍
2012/05/23 Javascript
js中AppendChild与insertBefore的用法详细解析
2013/12/16 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
2014/03/25 Javascript
js实现Select列表内容自动滚动效果代码
2015/08/20 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
nodejs6下使用koa2框架实例
2017/05/18 NodeJs
微信小程序 配置顶部导航条标题颜色的实现方法
2017/09/20 Javascript
微信小程序tabBar用法实例详解
2017/12/04 Javascript
Vue2实时监听表单变化的示例讲解
2018/08/30 Javascript
详解javascript函数写法大全
2019/03/25 Javascript
小程序Request的另类用法详解
2019/08/09 Javascript
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
Python SQLite3数据库日期与时间常见函数用法分析
2017/08/14 Python
Python编程求解二叉树中和为某一值的路径代码示例
2018/01/04 Python
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
Pandas统计重复的列里面的值方法
2019/01/30 Python
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
德国大型箱包和皮具商店:Koffer
2019/10/01 全球购物
毕业生护理专业个人求职信范文
2014/01/04 职场文书
机械个人求职信范文
2014/01/24 职场文书
优秀老员工获奖感言
2014/02/15 职场文书
教师节活动主持词
2014/04/02 职场文书
医疗纠纷协议书
2014/04/16 职场文书
市级文明单位申报材料
2014/05/07 职场文书
我为党旗添光彩演讲稿
2014/09/10 职场文书
旷工检讨书大全
2015/08/15 职场文书
用Python将GIF动图分解成多张静态图片
2021/06/11 Python
美元符号 $
2022/02/17 杂记