用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笔试题目附答案@20081025_jb51.net
Oct 26 Javascript
js 覆盖和重载 函数
Sep 25 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
Dec 08 Javascript
PHP守护进程实例
Mar 06 Javascript
Javascript代码实现仿实例化类
Apr 03 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 Javascript
JS实现获取进今年第几天是周几的方法分析
Jun 27 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
Apr 14 Javascript
浅谈js数组splice删除某个元素爬坑
Oct 14 Javascript
vant 时间选择器--开始时间和结束时间实例
Nov 04 Javascript
json.stringify()与json.parse()的区别以及用处
Jan 25 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获取网络文件的实现代码
2010/01/01 PHP
UCenter 批量添加用户的php代码
2012/07/17 PHP
php控制linux服务器常用功能 关机 重启 开新站点等
2012/09/05 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
JS操作XML中DTD介绍及使用方法分析
2019/07/04 PHP
juqery 学习之四 筛选查找
2010/11/30 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
简单选项卡 js和jquery制作方法分享
2014/02/26 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
2014/04/17 Javascript
Javascript动态创建div的方法
2015/02/09 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
2016/11/07 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
2017/02/09 Javascript
基于JavaScript实现全选、不选和反选效果
2017/02/15 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
vue自定义底部导航栏Tabbar的实现代码
2018/09/03 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
2018/10/31 Javascript
vue-cli3搭建项目的详细步骤
2018/12/05 Javascript
详解Python的Django框架中Manager方法的使用
2015/07/21 Python
Python+Selenium自动化实现分页(pagination)处理
2017/03/31 Python
Python列表切片操作实例总结
2019/02/19 Python
python实现的读取网页并分词功能示例
2019/10/29 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
flask开启多线程的具体方法
2020/08/02 Python
python实现简单的tcp 文件下载
2020/09/16 Python
Mansur Gavriel官网:纽约市的一个设计品牌
2019/05/02 全球购物
历史专业毕业生的自我鉴定
2013/11/15 职场文书
大学班长的职责
2014/01/27 职场文书
远程网络教育毕业生自我鉴定
2014/04/14 职场文书
酒桌上的祝酒词
2015/08/12 职场文书
2016入党积极分子心得体会
2016/01/06 职场文书
情况说明书格式及范文
2019/06/24 职场文书
python 下载文件的几种方式分享
2021/04/07 Python
前端框架ECharts dataset对数据可视化的高级管理
2022/12/24 Javascript