当前位置:  编程技术>WEB前端

jquery实现点击文字可编辑并修改保存至数据库

    来源: 互联网  发布时间:2014-08-25

    本文导语:  这个方法网上可以查到很多,但是好多只有点击文字编辑并保持,但是没有完整的代码写怎么保存到数据库。因为本人才疏学浅,费啦好长时间才写好把修改的内容只用一条sql语句保存到数据库,今天在这里和大家分享 这是...

这个方法网上可以查到很多,但是好多只有点击文字编辑并保持,但是没有完整的代码写怎么保存到数据库。因为本人才疏学浅,费啦好长时间才写好把修改的内容只用一条sql语句保存到数据库,今天在这里和大家分享

这是运行图片
 
这是前台页面 03.aspx页面
代码如下:






订单名称:







产品类型:





状态:




印量:






收货信息:






总金额:









这是js 03.js
代码如下:

$(function () {
//获取class为caname的元素
$(".caname").click(function () {
var td = $(this);
var txt = $.trim(td.text());
var input = $("");
td.html(input);
input.click(function () { return false; });
//获取焦点
input.trigger("focus");
//文本框失去焦点后提交内容,重新变为文本
input.blur(function () {
var newtxt = $(this).val();
//判断文本有没有修改
if (newtxt != txt) {
td.html(newtxt);

//不需要使用数据库的这段可以不需要

//var Order_Id = $("#ID_Order").text();
var updateCol = $.trim(td.prev().attr("id"));//我重点要说的是着一句:td.prev();表示本td的上一个td。这句代码的意思是你所点击的td的上一个td的id(如果不明白可以看前面的03.aspx页面)。
//ajax异步更改数据库,加参数date是解决缓存问题
url = "../test/03.ashx?caname=" + newtxt + "&updateCol=" + updateCol + "&date=" + new Date();




//使用get()方法打开一个一般处理程序,data接受返回的参数(在一般处理程序中返回参数的方法 context.Response.Write("要返回的参数");)
//数据库的修改就在一般处理程序中完成
$.get(url, function (data) {
// if (data == "1") {
// alert("该类别已存在!");
// td.html(txt);
// return;
// }
// alert(data);
alert("修改成功");
td.html(newtxt);
});

代码如下:

这是一般处理程序页面 03.ashx




代码如下:

using System;
using System.Web;
using System.Data.SqlClient;

public class _03 : IHttpHandler {

public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
int OrderId = 5;

string newOrderName = context.Request.QueryString["caname"];//获取用户修改后的文字
string updateCol = context.Request.QueryString["updateCol"];//获取用户修改的本td的上一个td的id的值(这个id与数据库中的列名相同)
string sql = "update eoPrintOrder set " + updateCol + " =@name where Id_order=@id";//通过这一条sql语句,就可以对数据库进行修改 SqlParameter[] pams = {
new SqlParameter("@name",newOrderName),
new SqlParameter("@id",OrderId)
};


string data = DscySFL.DbHelp.ExecuteCommand(sql,pams ).ToString();
context.Response.Write(data);

}

public bool IsReusable {
get {
return false;
}
}

}



    
 
 
 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • javascript和jquery修改a标签的href属性
  • Jquery获取和修改img的src值的方法
  • Jquery如何获取与修改img的src值
  • jQuery操作select option选项(增加 删除 修改)
  • 使用jQuery的attr方法来修改onclick值
  • jquery修改与设置属性值的例子
  • jquery css类用法(添加、修改与删除css)
  • jquery修改属性值实例代码(设置属性值)
  • jquery修改a标签中href超链接的实现代码
  • jquery修改input标签type属性
  • jQuery修改CSS伪元素属性的方法
  • jQuery中attr()和prop()在修改checked属性时的区别
  • jquery修改网页背景颜色通过css方法实现
  • jQuery 如何先创建、再修改、后添加DOM元素
  • jquery修改input标签type属性示例
  • 使用jquery修改表单的提交地址基本思路
  • Jquery遍历修改url请求参数的代码详解
  • Jquery 修改class样式的代码示例
  • jQuery+ajax实现鼠标单击修改内容的方法
  • jquery修改button的click函数的实现代码
  • 技术文章 iis7站长之家
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery圆角插件 jQuery Corners
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3