用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 相关文章推荐
window.parent调用父框架时 ie跟火狐不兼容问题
Jul 30 Javascript
js获取html参数及向swf传递参数应用介绍
Feb 18 Javascript
获得Javascript对象属性个数的示例代码
Nov 21 Javascript
jQuery简单实现遍历数组的方法
Apr 14 Javascript
AngularJs基本特性解析(一)
Jul 21 Javascript
javascript实现瀑布流动态加载图片原理
Aug 12 Javascript
AngularJS ng-template寄宿方式用法分析
Nov 07 Javascript
纯JS代码实现隔行变色鼠标移入高亮
Nov 23 Javascript
概述jQuery中的ajax方法
Dec 16 Javascript
动态加载css方法实现和深入解析
Jan 18 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 Javascript
如何让微信小程序页面之间的通信不再变困难
Jun 03 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(视频)Http下载
2006/12/12 PHP
第4章 数据处理-php数组的处理-郑阿奇
2011/07/04 PHP
php实现cc攻击防御和防止快速刷新页面示例
2014/02/13 PHP
php对包含html标签的字符串进行截取的函数分享
2014/06/19 PHP
php实现将上传word文件转为html的方法
2015/06/03 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
Laravel + Elasticsearch 实现中文搜索的方法
2020/02/02 PHP
cssQuery()的下载与使用方法
2007/01/12 Javascript
让网页根据不同IE版本显示不同的内容
2009/02/08 Javascript
javascript prototype原型操作笔记
2009/12/07 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
JS操作iframe里的dom(实例讲解)
2014/01/29 Javascript
详解JavaScript中undefined与null的区别
2014/03/29 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
2015/08/21 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
2016/06/03 Javascript
React中jquery引用的实现方法
2017/09/12 jQuery
nodejs使用redis作为缓存介质实现的封装缓存类示例
2018/02/07 NodeJs
vue过滤器用法实例分析
2019/03/15 Javascript
ES6中定义类和对象的方法示例
2019/07/31 Javascript
小程序实现图片预览裁剪插件
2019/11/22 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
Python聊天室实例程序分享
2016/01/05 Python
特征脸(Eigenface)理论基础之PCA主成分分析法
2018/03/13 Python
Python异常的检测和处理方法
2018/10/26 Python
Django 数据库同步操作技巧详解
2019/07/19 Python
用Python配平化学方程式的方法
2019/07/20 Python
Python PyQt5整理介绍
2020/04/01 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
python中的列表和元组区别分析
2020/12/30 Python
游戏商店:Eneba
2020/04/25 全球购物
质检员岗位职责
2015/02/03 职场文书
专家推荐信怎么写
2015/03/25 职场文书
开业庆典嘉宾致辞
2015/08/01 职场文书
祝酒词范文
2015/08/12 职场文书