用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.location 对象所包含的属性
Oct 10 Javascript
Vue.js 父子组件通讯开发实例
Sep 06 Javascript
Angular2从搭建环境到开发步骤详解
Oct 17 Javascript
微信小程序 教程之模块化
Oct 17 Javascript
解决微信二次分享不显示摘要和图片的问题
Aug 18 Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 Javascript
Vuex mutitons和actions初使用详解
Mar 04 Javascript
微信小程序-form表单提交代码实例
Apr 29 Javascript
vue-froala-wysiwyg 富文本编辑器功能
Sep 19 Javascript
微信小程序如何获取地址
Dec 24 Javascript
jquery实现垂直手风琴菜单
Mar 04 jQuery
VUE前端从后台请求过来的数据进行转换数据结构操作
Nov 11 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 中dirname(_file_)讲解
2007/03/18 PHP
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
JavaScript 利用Cookie记录用户登录信息
2009/12/08 Javascript
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
自己编写的类似JS的trim方法
2013/10/09 Javascript
php+js实现倒计时功能
2014/06/02 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
jQuery中的siblings用法实例分析
2015/12/24 Javascript
mvc中form表单提交的三种方式(推荐)
2016/08/10 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
Vue2.2.0+新特性整理及注意事项
2018/08/22 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
Vue项目打包编译优化方案
2020/09/16 Javascript
Django中cookie的基本使用方法示例
2018/02/03 Python
Anaconda入门使用总结
2018/04/05 Python
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
python线程安全及多进程多线程实现方法详解
2019/09/27 Python
python 生成任意形状的凸包图代码
2020/04/16 Python
通俗易懂了解Python装饰器原理
2020/09/17 Python
python多线程爬取西刺代理的示例代码
2021/01/30 Python
Trip.com香港网站:Ctrip携程旗下,全球最大的网上旅游社之一
2016/08/01 全球购物
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
美国香薰蜡烛品牌:PADDYWAX
2018/10/06 全球购物
怎样自定义一个异常类
2016/09/27 面试题
幼师求职自荐信
2014/05/31 职场文书
法学专业毕业生求职信
2014/06/12 职场文书
爱国口号
2014/06/19 职场文书
学习型党组织心得体会
2014/09/12 职场文书
2015年幼儿园元旦亲子活动方案
2014/12/09 职场文书
十月围城观后感
2015/06/08 职场文书
小学班主任心得体会
2016/01/07 职场文书
goland设置颜色和字体的操作
2021/05/05 Golang
Django drf请求模块源码解析
2021/06/08 Python