用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 相关文章推荐
音乐播放用的的几个函数
Sep 07 Javascript
走出JavaScript初学困境—js初学
Dec 29 Javascript
用Javascript 获取页面元素的位置的代码
Sep 25 Javascript
asm.js使用示例代码
Nov 28 Javascript
JavaScript中用字面量创建对象介绍
Dec 31 Javascript
对JavaScript中this指针的新理解分享
Jan 31 Javascript
JS继承用法实例分析
Feb 05 Javascript
移动端使用localResizeIMG4压缩图片
Apr 22 Javascript
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
AngularJS2 与 D3.js集成实现自定义可视化的方法
Dec 01 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
May 03 Javascript
layui table 列宽百分比显示的实现方法
Sep 28 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下mysql数据库操作类(改自discuz)
2010/07/03 PHP
PHP实现算式验证码和汉字验证码实例
2015/03/09 PHP
PHP文件缓存smarty模板应用实例分析
2016/02/26 PHP
javascript 出生日期和身份证判断大全
2008/11/13 Javascript
escape、encodeURI 和 encodeURIComponent 的区别
2009/03/02 Javascript
css配合jquery美化 select
2013/11/29 Javascript
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
JS实现保留n位小数的四舍五入问题示例
2016/08/03 Javascript
jQuery监听文件上传实现进度条效果的方法
2016/10/16 Javascript
使用Javascript监控前端相关数据的代码
2016/10/27 Javascript
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
2018/02/27 jQuery
使用Vue-cli 3.0搭建Vue项目的方法
2018/06/07 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
mpvue将vue项目转换为小程序
2018/09/30 Javascript
elementUI select组件value值注意事项详解
2019/05/29 Javascript
Python中线程编程之threading模块的使用详解
2015/06/23 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
Python匿名函数及应用示例
2019/04/09 Python
python 同时读取多个文件的例子
2019/07/16 Python
Python 日期区间处理 (本周本月上周上月...)
2019/08/08 Python
python读取指定字节长度的文本方法
2019/08/27 Python
法国太阳镜店:Sunglasses Shop
2016/08/27 全球购物
丝芙兰巴西官方商城:SEPHORA巴西
2016/10/31 全球购物
电子商务个人职业生涯规划范文
2014/02/12 职场文书
岗位说明书怎么写
2014/07/30 职场文书
大学教师个人总结
2015/02/10 职场文书
工作犯错保证书
2015/05/11 职场文书
2015年初一班主任工作总结
2015/05/13 职场文书
大学组织委员竞选稿
2015/11/21 职场文书
职场新人知识:如何制定一份合理的工作计划?
2019/09/11 职场文书
超详细教你怎么升级Mysql的版本
2021/05/19 MySQL
写一个Python脚本下载哔哩哔哩舞蹈区的所有视频
2021/05/31 Python
redis的list数据类型相关命令介绍及使用
2022/01/18 Redis
Python+tkinter实现高清图片保存
2022/03/13 Python
vue整合百度地图显示指定地点信息
2022/04/06 Vue.js