首页 > 代码库 > gridview实现表格编辑功能
gridview实现表格编辑功能
.net开发者对gridview应该非常熟悉，数据展现、数据编辑、数据删除，这些gridview都能很好的完成。最近在做东西的时候遇到
这样的一个需求，就是利用gridview实现类似Excel一样直接编辑单元格并能够对数据进行保存。下面说一下自己的思路。
实现这个功能主要用到了jquery。大体思路是这样的。
1.双击某个单元格让这个单元格能够编辑。
2.编辑单元格后能够将数据保存到数据。
3.保存成功后单元格恢复到正常。
第一问题一般思路就是给单元格一个双击事件 然后动态的添加一个textbox
第二个问题数据交互我们想到了用ajax
第三个问题保存成功后利用ajax的回调函数将单元格回复正常。
上代码！
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <script src=http://www.mamicode.com/"Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> //input 元素内容变化后 同步数据 function AddOrEdit(event, object) { var txtvalue = http://www.mamicode.com/$(object).val(); var para = $txt.attr("title"); $.ajax({ type: "POST", url: "ashx/ManageTM.ashx", dataType: "JSON", data: { value: txtvalue, emp: para }, success: function (data) { var $oldbrother = $(object).parent().children("label"); $oldbrother.css("display", "block");//显示label $oldbrother.text($(object).val());//编辑后的值赋给label $(object).remove();//删除input元素 } }) } //双击td元素 function Edit(object) { var $tdchild = $(object).children("label"); $tdchild.css("display", "none");//隐藏label元素 var txt = ‘<input type="text" class="inserttxt" value="http://www.mamicode.com/‘ + $tdchild.text() + ‘" title="‘ + $tdchild.attr("title") + ‘" onchange="AddOrEdit(this)" onblur="Lost(this)"></input>‘; $(object).append(txt);//将input元素添加到td中 $(object).children("input").focus().select();//让input元素获取焦点并选中内容 } //input元素失去焦点后 删除input元素并将值赋给label function Lost(object) { var $oldbrother = $(object).parent().children("label"); $oldbrother.css("display", "block"); $oldbrother.text($(object).val()); $(object).remove(); } </script> <style type="text/css"> .insertlbl { color:Black; } .td { padding:none; width:100px; text-align:center; border-left:1px solid black; border-right:1px solid black; } .inserttxt { width:50px; } </style></head><body> <form id="form1" runat="server"> <div style="margin-left:auto; margin-right:auto; width:300px;"> <asp:GridView ID="gvTM" runat="server" AutoGenerateColumns="False" > <Columns> <asp:TemplateField> <HeaderTemplate> <table style="width:100%" id="tableheard"> <tr> <td class="td">工号</td> <td class="td">姓名</td> </tr> </table> </HeaderTemplate> <ItemTemplate> <table> <tr> <td class="td"><label><%#Eval("EmpCardID") %></label></td> <%--这里用tittl属性绑定数据是方便取唯一标示便于同步数据--%> <td ondblclick="Edit(this)" class="td"><label class="insertlbl" title=‘<%#Eval("EmpCardID") %>‘><%#Eval("Name") %></label></td> </tr> </table> </ItemTemplate> </asp:TemplateField> </Columns> <PagerSettings Visible="False" /> </asp:GridView> </div> </form></body></html>
程序有个小问题。当连续双击的话会产生多个textbox。可以在双击事件那里加个判断，当已经有input元素的时候就不进行添加操作。
ajax的地方是请求的一般处理文件。大家应该都会。有问题请留言。不喜勿喷！
gridview实现表格编辑功能
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。