用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来实现动画导航效果的代码
Dec 16 Javascript
用js做一个小游戏平台 (一)
Dec 29 Javascript
javascript 函数参数限制说明
Nov 19 Javascript
让人印象深刻的10个jQuery手风琴效果应用
May 08 Javascript
JQuery实现用户名无刷新验证的小例子
Mar 22 Javascript
js获取location.href的参数实例代码
Aug 02 Javascript
js操作iframe父子窗体示例
May 22 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
Jun 19 Javascript
jquery+css实现动感的图片切换效果
Nov 25 Javascript
jQuery实现大图轮播
Feb 13 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
Vue 幸运大转盘实现思路详解
May 06 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
编写漂亮的代码 - 将后台程序与前端程序分开
2008/04/23 PHP
php visitFile()遍历指定文件夹函数
2010/08/21 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
php 提交表单 关闭layer弹窗iframe的实例讲解
2018/08/20 PHP
详解php反序列化
2020/06/10 PHP
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
Node.js中用D3.js的方法示例
2017/01/16 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
Nuxt.js 数据双向绑定的实现
2019/02/17 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
2019/06/18 jQuery
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
JS实现音量控制拖动
2020/01/15 Javascript
详解JavaScript 中的批处理和缓存
2020/11/19 Javascript
web.py在SAE中的Session问题解决方法(使用mysql存储)
2015/06/24 Python
python获取文件真实链接的方法,针对于302返回码
2018/05/14 Python
Python 给某个文件名添加时间戳的方法
2018/10/16 Python
5分钟 Pipenv 上手指南
2018/12/20 Python
python分数表示方式和写法
2019/06/26 Python
解决Django layui {{}}冲突的问题
2019/08/29 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
草莓网美国官网:Strawberrynet USA
2016/12/11 全球购物
意大利奢侈品零售商:ilDuomo Novara
2019/09/11 全球购物
办公室内勤岗位职责范本
2013/12/09 职场文书
竞聘上岗演讲稿范文
2014/01/10 职场文书
服务员自我评价
2014/01/25 职场文书
yy司仪主持词
2014/03/22 职场文书
CSS 实现Chrome标签栏的技巧
2021/08/04 HTML / CSS
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers
Win10多屏显示如何设置?Win10电脑多屏显示设置操作方法
2022/07/07 数码科技