.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") + '" 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实现表格编辑功能的更多相关文章

  1. JAVAEE——BOS物流项目09：业务受理需求分析、创建表、实现自动分单、数据表格编辑功能使用方法和工作单快速录入

    1 学习计划 1.业务受理需求分析 n 业务通知单 n 工单 n 工作单 2.创建业务受理环节的数据表 n 业务通知单 n 工单 n 工作单 3.实现业务受理自动分单 n 在CRM服务端扩展方法根据手 ...

  2. Swift - 给表格添加编辑功能（删除，插入）

    1,下面的样例是给表格UITableView添加编辑功能: (1)给表格添加长按功能,长按后表格进入编辑状态 (2)在编辑状态下,第一个分组处于删除状态,第二个分组处于插入状态 (3)点击删除图标,删 ...

  3. jquery-easyui 中表格的行编辑功能

    具体实现代码如下: <table id="tt"></table> $('#tt').datagrid({ title:'Editable DataGrid ...

  4. swift - 表格的编辑功能（添加、删除）

    表格(tableview)的确是一个很好用的控件,现在来实现一个编辑功能的实现,包含添加和删除,删除包括长按删除和左滑删除 效果图如下: 具体代码如下: 1.创建表格(这个表格有2个区,有区头和区尾) ...

  5. SNF开发平台WinForm之一-开发-单表表格编辑管理页面-SNF快速开发平台3.3-Spring.Net.Framework

    1.1运行效果: 1.2开发实现: 1.2.1          首先在数据库中创建需要开发的数据表,在代码生成器中进行配置连接数据库. 代码生成器的Config.xml文件配置如下节点: 1.2.2 ...

  6. stark组件开发之编辑功能实现

    编辑功能.和添加一样! 唯一不同的就是, 需要编辑一个指定的  记录.这就需要,在列表页面, 渲染编辑的时候,添加一个 id 值: class UserInfoHandler(StartHandler ...

  7. atitit.新增编辑功能 跟orm的实现 attilax p31

    atitit.新增编辑功能 跟orm的实现 attilax p31 1. 流程的实现 1 2. view的实现(dwr) 1 3. 获取表结构 1 4. grep filt req params 2 ...

  8. 在Vue前端界面中，几种数据表格的展示处理，以及表格编辑录入处理操作。

    在Vue前端项目中,我这里主要是基于Vue+Element的开发,大多数情况下,我们利用Element的表格组件就可以满足大多数情况的要求,本篇随笔针对表格的展示和编辑处理,综合性的介绍几款表格组件的 ...

  9. Editable DataGrid 实现列表新增编辑功能

    今天在开发一个功能时候,需要直接在列表实现新增.编辑等功能.于是查看easyui 相关文档,找到相关解决办法. easyui的datagrid支持可编辑功能.它使用户能够向数据网格中添加一个新行.用户 ...

随机推荐

  1. [BZOJ 3144] [Hnoi2013] 切糕 【最小割】

    题目链接:BZOJ - 3144 题目分析 题意:在 P * Q 的方格上填数字,可以填 [1, R] . 在 (x, y) 上填 z 会有 V[x][y][z] 的代价.限制:相邻两个格子填的数字的 ...

  2. DJANGO不同应用之间的用户迁移

    因为重新规划新的项目,数据库表结构和以前不一定了,但是想保存以前的很多用户认证方面的东东. 于是看了一下DJANGO的导入导出功能. ~~~~~~~~~~~~~~~~~~~ 数据导入: python ...

  3. 在CENTOS6上安装MONGODB

    为接下来的工作热一下手.. 以前看过一本书,了解了,但好像有三四年,又忘了..:( 参考URL: http://www.centoscn.com/image-text/install/2014/112 ...

  4. Andoir 判断软键盘是否弹出

    前言          欢迎大家我分享和推荐好用的代码段~~ 声明          欢迎转载,但请保留文章原始出处:          CSDN:http://www.csdn.net        ...

  5. 从 mian 函数开始一步一步分析 nginx 执行流程（一）

    如不做特殊说明,本博客所使用的 nginx 源码版本是 1.0.14,[] 中是代码所在的文件! 我们先贴出 main 函数的部分代码: [core/nginx.c] int ngx_cdecl ma ...

  6. -_-#【Better Code】throttle / debounce

    浅谈javascript的函数节流 javascript函数的throttle和debounce throttle 疯狂触发事件,固定步调执行 debounce 疯狂触发事件,不会执行 var res ...

  7. 开发备必：WEB前端开发规范文档

    为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必 须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地 ...

  8. Linux学习笔记3——Linux中常用系统管理命令

    stat 显示指定文件的相关信息,比ls命令显示内容更多 who 显示在线登录用户 hostname 显示主机名称 uname显示系统信息 top 显示当前系统中耗费资源最多的进程 ps 显示瞬间的进 ...

  9. Debian添加软件源

    安装完渗透测试系统kali linux后,默认的只有security这个源,只更新那些集成的安全软件,不能安装其他新软件,官网给出了3类源: Kali Linux提供了3类软件源,这些源在世界各地都有 ...

  10. android.mk android源码编译

    http://www.cnblogs.com/chenbin7/archive/2013/01/05/2846863.html Android.mk简单分析 2013-01-05 22:51 by . ...