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

最新推荐文章于 2023-04-01 22:00:38 发布

javaPie

最新推荐文章于 2023-04-01 22:00:38 发布

阅读量2.2k

点赞数 1

分类专栏： JAVA

JAVA 专栏收录该内容

734 篇文章 5 订阅

订阅专栏

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

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

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

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

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

Html页面的代码：

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

绑定信息代码：

[csharp]view plaincopyprint? 
    
 protected void Page_Load(object sender, EventArgs e)  
         {  
             if (!Page.IsPostBack)  
             {  
                 //绑定模块信息  
                 ModelInfoMgr modelInfoMgr = new ModelInfoMgr();  
                 DataTable dt = new DataTable();  
                 //查询所有的模块信息  
                 dt = modelInfoMgr.SelectAll();  
                 //绑定  
                 rptModel.DataSource = dt;  
                 rptModel.DataBind();  
   
             }  
         }  

重头戏来了，JS代码

[javascript]view plaincopyprint? 
    
 $(function () {  
     $(".modelname").click(function () {//给页面中的modelname的标签加上click事件  
         var objTD = $(this);  
         //alert("heheh");  
         //点击后，内容变成文本框  
         var oldText = $(this).text();  //保存原来的文本  
         var input =$( "<input type='text'  value='" + oldText + "'/>");//文本框的html代码  
         objTD.html(input);  //td变为文本  
         //设置文本框的点击事件失效  
         input.click(function () {  
             return false;  
         });  
         //设置文本框的样式  
         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 () {  
             var newText = $(this).val();  
             var input_blur = $(this);  
             //objTD.html(newText);  
             //当原来的名称与修改后的名称不同时才进行数据库提交操作  
             if (oldText != newText) {  
   
                 //获取该模块名称对应的ID  
                 var modelID = $.trim(objTD.prev().text());  
                 // AJAX异步更改数据库  
                 var url = "../handler/changeModelName.ashx?modelname=" + encodeURI(encodeURI(newText)) + "&modelID=" + modelID + "&t=" + new Date();  
                 $.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 () {  
             var jianzhi = event.keyCode;  
             var input_keydown = $(this);  
             switch (jianzhi) {  
                 case 13:   //按下回车，保存修改  
                     var newText = input_keydown.val();//修改后的名称  
                     //当原来的名称与修改后的名称不同时才进行数据库提交操作  
                     if (oldText != newText) {  
                         //获取该模块名称对应的ID  
                         var modelID = $.trim(objTD.prev().text());  
                         // AJAX异步更改数据库  
                         var url = "../handler/changeModelName.ashx?modelname=" + encodeURI(encodeURI(newText)) + "&modelID=" + modelID + "&t=" + new Date();  
                         $.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;  
     }  
 });  

handler文件：

[csharp]view plaincopyprint? 
    
 public void ProcessRequest(HttpContext context)  
        {  
            context.Response.ContentType = "text/plain";  
            string modelid= context.Request.QueryString["modelID"];  
            string modelname=context.Server.UrlDecode(context.Request.QueryString["modelname"]);  
            //更改模块名称  
            ModelInfoMgr modelInfoMgr = new ModelInfoMgr();  
            ModelInfo modelInfo = new ModelInfo();  
            modelInfo.ID = modelid;  
            modelInfo.Name = modelname;  
            //判断是否已经存在  
            if (modelInfoMgr .Exists(modelInfo))  
            {  
                context.Response.Write("false");  
                return;  
            }  
          bool flag=  modelInfoMgr.Update(modelInfo);  
          if (flag)  
          {  
              context.Response.Write("true");  
          }  
          else  
          {  
              context.Response.Write("false");  
          }  
        }  

效果图：

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

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

javaPie

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Ajax实现将可以编辑的表格与数据库交互

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

扫一扫

专栏目录