gridview实现表格编辑功能

最新推荐文章于 2022-02-17 16:54:59 发布

weixin_30456039

最新推荐文章于 2022-02-17 16:54:59 发布

阅读量690

点赞数

文章标签： xhtml javascript json ViewUI

原文链接：http://www.cnblogs.com/bboy-coco/p/4244319.html

版权

.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="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    //input 元素内容变化后 同步数据
        function AddOrEdit(event, object) {
            var txtvalue = $(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="' + $tdchild.text() + '" title="' + $tdchild.attr("title") + '" οnchange="AddOrEdit(this)" οnblur="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  οndblclick="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>

View Code

程序有个小问题。当连续双击的话会产生多个textbox。可以在双击事件那里加个判断，当已经有input元素的时候就不进行添加操作。

ajax的地方是请求的一般处理文件。大家应该都会。有问题请留言。不喜勿喷！

转载于:https://www.cnblogs.com/bboy-coco/p/4244319.html

weixin_30456039

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
gridview实现表格编辑功能

.net开发者对gridview应该非常熟悉，数据展现、数据编辑、数据删除，这些gridview都能很好的完成。最近在做东西的时候遇到这样的一个需求，就是利用gridview实现类似Excel一样直接编辑单元格并能够对数据进行保存。下面说一下自己的思路。实现这个功能主要用到了jquery。大体思路是这样的。1.双击某个单元格让这个单元格能够编辑。2.编辑单元格后能够将数据保存到数据...
复制链接

扫一扫