Ajax实现将可以编辑的表格与数据库交互

发布时间：2020-12-16 01:55:18 所属栏目：百科来源：网络整理

导读：Ajax实现将可以编辑的表格与数据库交互 2012-12-28 17:16 2568人阅读评论(15) 收藏举报上篇博客通过JQuery实现单击表格进行编辑的功能，本篇博客将继续延伸，将在此功能的基础之上，与数据库交互，实现真正的可编辑。传统的网页，如果需要更新数据，需要

Ajax实现将可以编辑的表格与数据库交互

2012-12-28 17:16 2568人阅读评论(15) 收藏举报

上篇博客通过JQuery实现单击表格进行编辑的功能，本篇博客将继续延伸，将在此功能的基础之上，与数据库交互，实现真正的可编辑。

传统的网页，如果需要更新数据，需要更新整个页面，而Ajax可以通过在后台与服务器进行少量数据交换，使网页实现异步更新，是一种在无需加载整个网页的情况下，能够更新部分网页的技术。

本篇博客将上传我在项目用到的可以编辑的表格的源代码。继续丰富了上篇博客中的编辑效果，又与数据库进行交互，实现真正的可编辑。

Html页面的代码：

[html] 
    view plain 
    copy 
    print 
    ? 
     
    
 <divclass="span9">
 <%--显示提示信息--%>
 <asp:LabelID="Label1"runat="server"Text="说明：单击模块名称进行修改，回车或单击其它地方确定修改，ESC取消编辑。"ForeColor="Red"></asp:Label>
 <%--局部更新--%>
 <asp:ScriptManagerID="ScriptManager1"runat="server"></asp:ScriptManager>
 <asp:UpdatePanelID="UpdatePanel1"runat="server">
 <ContentTemplate>
 <%--表格--%>
 <tableclass="tabletable-striped">
 <tr>
 <th>模块ID</th>
 <th>模块名称</th>
 <th>删除</th>
 </tr>
 <%--绑定到Repeater--%>
 <asp:RepeaterID="rptModel"runat="server">
 <ItemTemplate>
 <td><%#Eval("mdlID")%></td>
 <tdclass="modelname"><%#Eval("mdlName")%></td>
 <td>
 <asp:LinkButtonID="lbtnDelete"runat="server"OnClick="lbtnDelete_Click"OnClientClick="returnconfirm('是否要真的删除？')"CommandArgument='<%#Eval("mdlID")%>'>删除</asp:LinkButton>
 </td>
 </ItemTemplate>
 </asp:Repeater>
 </table>
 </ContentTemplate>
 </asp:UpdatePanel>
 <%--显示错误信息--%>
 <divid="test"></div>
 <%--添加模块名称--%>
 <p>
 <asp:LabelID="Label2"runat="server"Text="模块名称"></asp:Label>
 <asp:TextBoxID="txtModelName"runat="server"></asp:TextBox>
 <asp:ButtonID="btnAddModel"UseSubmitBehavior="false"runat="server"Text="添加"CssClass="btnbtn-info"OnClick="btnAddModel_Click"/>
 </p>
 </div>

绑定信息代码：

[csharp] 
    ?

protectedvoidPage_Load(objectsender,EventArgse)

{
if(!Page.IsPostBack)
//绑定模块信息
ModelInfoMgrmodelInfoMgr=newModelInfoMgr();
DataTabledt=newDataTable();
//查询所有的模块信息
dt=modelInfoMgr.SelectAll();
//绑定
rptModel.DataSource=dt;
rptModel.DataBind();
}
}

重头戏来了，JS代码

[javascript] 
    ?

$(function(){

$(".modelname").click(function(){//给页面中的modelname的标签加上click事件
varobjTD=$(this);
//alert("heheh");
//点击后，内容变成文本框
varoldText=$(this).text();//保存原来的文本
varinput=$("<inputtype='text'value='"+oldText+"'/>");//文本框的html代码
objTD.html(input);//td变为文本
//设置文本框的点击事件失效
input.click(function(){
returnfalse;
});
//设置文本框的样式
input.css("border-width",0);//边框为0
input.css("margin",0);
input.css("padding",0);
input.css("color","black");
//input.height(objTD.height);//文本框的高度为当前td的高度
//input.width(objTD.width);
input.trigger("focus").trigger("select");//全选
//文本框失去焦点的时候变为文本
input.blur(function(){
varnewText=$(this).val();
varinput_blur=$(this);
//objTD.html(newText);
//当原来的名称与修改后的名称不同时才进行数据库提交操作
if(oldText!=newText){
//获取该模块名称对应的ID
varmodelID=$.trim(objTD.prev().text());
//AJAX异步更改数据库
varurl="../handler/changeModelName.ashx?modelname="+encodeURI(encodeURI(newText))+"&modelID="+modelID+"&t="+newDate();
$.get(url,function(data){
if(data=="false"){
$("#test").text("模块名称修改失败，请检查是否重复");
input_blur.trigger("focus").trigger("select");//文本框全选
}
else{
$("#test").text("");
objTD.html(newText);
//前后文本一样，将文本宽变成标签
//在文本框中按下键盘某建
input.keydown(function(){
varjianzhi=event.keyCode;
varinput_keydown=$(this);
switch(jianzhi){
case13://按下回车，保存修改
varnewText=input_keydown.val();//修改后的名称
//获取该模块名称对应的ID
varmodelID=$.trim(objTD.prev().text());
//AJAX异步更改数据库
varurl="../handler/changeModelName.ashx?modelname="+encodeURI(encodeURI(newText))+"&modelID="+modelID+"&t="+newDate();
function(data){
if(data=="false"){
$("#test").text("模块名称修改失败，请检查是否重复");
input_keydown.trigger("focus").trigger("select");//文本框全选
else{
$("#test").text("");
objTD.html(newText);
break;
case27://按下Esc，取消修改，吧文本框变成文本
objTD.html(oldText);
});
//屏蔽Enter按键
$(document).keydown(function(event){
switch(event.keyCode){
case13:returnfalse;
});

handler文件：

?

publicvoidProcessRequest(HttpContextcontext)

context.Response.ContentType="text/plain";
stringmodelid=context.Request.QueryString["modelID"];
stringmodelname=context.Server.UrlDecode(context.Request.QueryString["modelname"]);
//更改模块名称
ModelInfoMgrmodelInfoMgr=newModelInfoMgr();
ModelInfomodelInfo=newModelInfo();
modelInfo.ID=modelid;
modelInfo.Name=modelname;
//判断是否已经存在
if(modelInfoMgr.Exists(modelInfo))
{
context.Response.Write("false");
return;
boolflag=modelInfoMgr.Update(modelInfo);
if(flag)
context.Response.Write("true");
else
}

效果图：

如图中的提示，上面的代码做单击模块名称就可以进行修改，且回车或者单击其他地方确定修改，按ESC取消编辑。

这是在牛腩老师的方法，希望在以后的学习中，可以领会此方法之外，能够更新知识和做法，也希望得到大牛的指导和点拨，再次感谢了。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!