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

Posted 2023-04-25

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

这是前台页面
03.aspx页面
复制代码
代码如下:
<table
id="MyTable"
cellspacing="1"
cellpadding="3">
<asp:Repeater
ID="reorderInFo"
runat="server">
<ItemTemplate>
<tr
style="text-align:
left;">
<td
width="70"
height="40"
id="OrderName">
订单名称：
</td>
<td
colspan="5"
class="caname"
id="OrderName1">
<%#Eval("OrderName")%>
</td>
</tr>
<tr
style="text-align:
left;">
<td
width="70"
height="40"
id="ID_Product">
产品类型:
</td>
<td
class="caname"
id="ID_Product1">
<%#Eval("ID_Product")%>
</td>
<td
width="40"
id="OrderState_Send">
状态:
</td>
<td
class="caname"
id="OrderState_Send1"
><%#Eval("OrderState_Send")%>
</td>
<td
width="40"
id="OrderQty">
印量:
</td>
<td
class="caname"
id="OrderQty1"
><%#Eval("OrderQty")%>
</td>
</tr>
<tr>
<td
width="70"
height="60"
id="SendAddress">
收货信息:
</td>
<td
colspan="5"
class="caname"
id="SendAddress1"
><%#Eval("SendAddress")%>
</td>
</tr>
<tr
style="text-align:
left;">
<td
width="70"
height="50"
id="OrderMoney_Total">
总金额:
</td>
<td
colspan="5"
class="caname"
id="OrderMoney_Total1"
><%#Eval("OrderMoney_Total")%>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
这是js
03.js
复制代码
代码如下:
$(function
()

//获取class为caname的元素
$(".caname").click(function
()

var
td
=
$(this);
var
txt
=
$.trim(td.text());
var
input
=
$("<input
type='text'value='"
+
txt
+
"'/>");
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);
);
复制代码
代码如下:
<p><span
style="font-size:14px;">这是一般处理程序页面<span
style="font-family:Times
New
Roman;">
03.ashx</span></span></p><p>
<%@
WebHandler
Language="C#"
Class="_03"
%></p>
复制代码
代码如下:
<p>using
System;
using
System.Web;
using
System.Data.SqlClient;</p><p>public
class
_03
:
IHttpHandler

public
void
ProcessRequest
(HttpContext
context)

context.Response.ContentType
=
"text/plain";
int
OrderId
=
5;</p><p>
string
newOrderName
=
context.Request.QueryString["caname"];//获取用户修改后的文字
string
updateCol
=
context.Request.QueryString["updateCol"];//获取用户修改的本td的上一个td的id的值（这个id与数据库中的列名相同）
string
sql
=
"update
eoPrintOrder
set
"
+
updateCol
+
"
<a
target="_blank"
href="mailto:=@name">=@name</a>
where
<a
target="_blank"
href="mailto:Id_order=@id';//">Id_order=@id";//</a>通过这一条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;

</p><p></p>

基于Birt4.6实现报表表格数据的可编辑

奇葩需求：客户要求某业务系统中生成的报表数据可以编辑。为响应客户的需求，本文基于Birt 4.6实现报表数据的可编辑（伪修改）。

BIRT 是以 Java 和 JavaEE 为基础为 Web 应用程序开发的基于 Eclipse 的开源报表系统，其本身并不支持报表数据的修改。因此想要实现报表数据的可编辑，需要修改生成报表的渲染页面。本文的方案是在报表生成页面引入Jquery实现报表表格数据的可编辑，这是一种简单的快速实现方式，具体实现方案如下：

1）找到Birt渲染页面

Birt的渲染页面路径../birt/webcontent/birt/pages/layout，不熟悉的朋友详见Github请添加链接描述

3) 2) 引入Jquery并避免冲突

<script type="text/javascript" src="<c:url value=‘/statics/js/jquery-3.2.1.min.js‘/>"></script>

去掉Jquery中的$混淆符号
<script>
$.noConflict();
</script>

3）实现表格的可编辑

jQuery("table td").dblclick(function(el) {
    var editTxt = el.target.innerText;
    if(editTxt!=""){
        var editCell = jQuery(el.target);
        var input = jQuery("<input type=‘text‘ value=‘" + editTxt +   "‘/>");
        editCell.html(input); 
        input.trigger("focus"); 

        //失去焦点时
        input.blur(function() { 
            var newTxt = jQuery(this).val();
            editCell.html(newTxt);
        });

    }
});

最后求大家点个关注再走