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

Ajax 前端之家
前端之家收集整理的这篇文章主要介绍了Ajax实现将可以编辑的表格与数据库交互，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

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

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

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

Html页面的代码：

[html] view plain copy print ?
  1. <divclass="span9">
  2. <%--显示提示信息--%>
  3. <asp:LabelID="Label1"runat="server"Text="说明：单击模块名称进行修改，回车或单击其它地方确定修改，ESC取消编辑。"ForeColor="Red"></asp:Label>
  4. <%--局部更新--%>
  5. <asp:ScriptManagerID="ScriptManager1"runat="server"></asp:ScriptManager>
  6. <asp:UpdatePanelID="UpdatePanel1"runat="server">
  7. <ContentTemplate>
  8. <%--表格--%>
  9. <tableclass="tabletable-striped">
  10. <tr>
  11. <th>模块ID</th>
  12. <th>模块名称</th>
  13. <th>删除</th>
  14. </tr>
  15. <%--绑定到Repeater--%>
  16. <asp:RepeaterID="rptModel"runat="server">
  17. <ItemTemplate>
  18. <td><%#Eval("mdlID")%></td>
  19. <tdclass="modelname"><%#Eval("mdlName")%></td>
  20. <td>
  21. <asp:LinkButtonID="lbtnDelete"runat="server"OnClick="lbtnDelete_Click"OnClientClick="returnconfirm('是否要真的删除？')"CommandArgument='<%#Eval("mdlID")%>'>删除</asp:LinkButton>
  22. </td>
  23. </ItemTemplate>
  24. </asp:Repeater>
  25. </table>
  26. </ContentTemplate>
  27. </asp:UpdatePanel>
  28. <%--显示错误信息--%>
  29. <divid="test"></div>
  30. <%--添加模块名称--%>
  31. <p>
  32. <asp:LabelID="Label2"runat="server"Text="模块名称"></asp:Label>
  33. <asp:TextBoxID="txtModelName"runat="server"></asp:TextBox>
  34. <asp:ButtonID="btnAddModel"UseSubmitBehavior="false"runat="server"Text="添加"CssClass="btnbtn-info"OnClick="btnAddModel_Click"/>
  35. </p>
  36. </div>


绑定信息代码：

@H_404_816@ [csharp] ?
    protectedvoidPage_Load(objectsender,EventArgse)
  1. {
  2. if(!Page.IsPostBack)
  3. //绑定模块信息
  4. ModelInfoMgrmodelInfoMgr=newModelInfoMgr();
  5. DataTabledt=newDataTable();
  6. //查询所有的模块信息
  7. dt=modelInfoMgr.SelectAll();
  8. //绑定
  9. rptModel.DataSource=dt;
  10. rptModel.DataBind();
  12. }
  13. }


重头戏来了，JS代码

[javascript] ?
    $(function(){
  1. $(".modelname").click(function(){//给页面中的modelname的标签加上click事件
  2. varobjTD=$(this);
  3. //alert("heheh");
  4. //点击后，内容变成文本框
  5. varoldText=$(this).text();//保存原来的文本
  6. varinput=$("<inputtype='text'value='"+oldText+"'/>");//文本框的HTML代码
  7. objTD.html(input);//td变为文本
  8. //设置文本框的点击事件失效
  9. input.click(function(){
  10. returnfalse;
  11. });
  12. //设置文本框的样式
  13. input.css("border-width",0);//边框为0
  14. input.css("margin",0);
  15. input.css("padding",0);
  16. input.css("color","black");
  17. //input.height(objTD.height);//文本框的高度为当前td的高度
  18. //input.width(objTD.width);
  19. input.trigger("focus").trigger("select");//全选
  20. //文本框失去焦点的时候变为文本
  21. input.blur(function(){
  22. varnewText=$(this).val();
  23. varinput_blur=$(this);
  24. //objTD.html(newText);
  25. //当原来的名称与修改后的名称不同时才进行数据库提交操作
  26. if(oldText!=newText){
  28. //获取该模块名称对应的ID
  29. varmodelID=$.trim(objTD.prev().text());
  30. //AJAX异步更改数据库
  31. varurl="../handler/changeModelName.ashx?modelname="+encodeURI(encodeURI(newText))+"&modelID="+modelID+"&t="+newDate();
  32. $.get(url,function(data){
  33. if(data=="false"){
  34. $("#test").text("模块名称修改失败，请检查是否重复");
  35. input_blur.trigger("focus").trigger("select");//文本框全选
  36. }
  37. else{
  38. $("#test").text("");
  39. objTD.html(newText);
  40. //前后文本一样，将文本宽变成标签
  41. //在文本框中按下键盘某建
  42. input.keydown(function(){
  43. varjianzhi=event.keyCode;
  44. varinput_keydown=$(this);
  45. switch(jianzhi){
  46. case13://按下回车，保存修改
  47. varnewText=input_keydown.val();//修改后的名称
  48. //获取该模块名称对应的ID
  49. varmodelID=$.trim(objTD.prev().text());
  50. //AJAX异步更改数据库
  51. varurl="../handler/changeModelName.ashx?modelname="+encodeURI(encodeURI(newText))+"&modelID="+modelID+"&t="+newDate();
  52. function(data){
  53. if(data=="false"){
  54. $("#test").text("模块名称修改失败，请检查是否重复");
  55. input_keydown.trigger("focus").trigger("select");//文本框全选
  56. else{
  57. $("#test").text("");
  58. objTD.html(newText);
  59. break;
  60. case27://按下Esc，取消修改，吧文本框变成文本
  61. objTD.html(oldText);
  62. });
  63. //屏蔽Enter按键
  64. $(document).keydown(function(event){
  65. switch(event.keyCode){
  66. case13:returnfalse;
  67. });

handler文件：


?
    publicvoidProcessRequest(HttpContextcontext)
  1. context.Response.ContentType="text/plain";
  2. stringmodelid=context.Request.QueryString["modelID"];
  3. stringmodelname=context.Server.UrlDecode(context.Request.QueryString["modelname"]);
  4. //更改模块名称
  5. ModelInfoMgrmodelInfoMgr=newModelInfoMgr();
  6. ModelInfomodelInfo=newModelInfo();
  7. modelInfo.ID=modelid;
  8. modelInfo.Name=modelname;
  9. //判断是否已经存在
  10. if(modelInfoMgr.Exists(modelInfo))
  11. {
  12. context.Response.Write("false");
  13. return;
  14. boolflag=modelInfoMgr.Update(modelInfo);
  15. if(flag)
  16. context.Response.Write("true");
  17. else
  18. }


效果图：

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

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

原文链接：https://www.f2er.com/ajax/163112.html

猜你在找的Ajax相关文章

网页的异步请求（Ajax）
JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表...
手动实现AJAX
AJAX 每日更新前端基础，如果觉得不错，点个star吧 &#128515; https://github.com/Win...
axios异步提交表单数据的不同形式
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...
php的ajax简单实例
很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...
Json与Ajax(注册实例）
需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: &quot;./serv...
jSon和Ajax登录功能，ajax数据交互案例
ajax实例，检测用户与注册 检测用户名是否被占用： 在用户填写完用户名之后，ajax会异步向...
关于AjaxControlToolkit的样式问题
网(LieHuo.Net)教程 技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...
一个简单的AJAX实现(HELLO AJAX)
客户端部分： <html> <head> <meta http-equiv="Content-Type" ...
AJAX中文乱码的两类问题及解决之策
1）发送路径中的参数有中文，在服务器段接收参数值是乱码 例如： var url=”a.jsp?na...
实例：AJAX返回xml代码如何在网页中显示
建站学院（LieHuo.Net）文档 今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作