.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. spring与mybatis，strut2整合连接sqlserver不的不说的那点事儿

    今天在通过spring与mybatis整合中,想连接下公司用的sqlserver数据库,结果使用Junit测发现没连上,于是就有了下面的问题: 准备工作都已经做好了 web中spring的监听配置了 ...

  2. DPI/PPI/dp/sp/px/pt 移动设计手册

    转自DPI/PPI/dp/sp/px/pt 移动设计手册 做移动设计的同学,不管是原生app或者web app,应该对字体字号都是很头痛的问题.根本原因是,我们用唯一分辨率的电脑,设计各个不同尺寸大小 ...

  3. Unity与IOS交互

    Unity IOS交互 @By 广州小龙  QQ群:63438968 环境:Mac os 10.9.2  Unity 4.2.1f4   Xcode 5.0.2 Unity IOS的交互我写过一个教程 ...

  4. Distinct Substrings

    spoj694:http://www.spoj.com/problems/DISUBSTR/ 题意:给以一个串,求这个串的所有不同子串的个数. 题解:第一次接触后缀数组,这里可以转化成,求所有子串后缀 ...

  5. 【uva11374】Airport Express 最短路

    题意: 在Iokh市中,机场快线是市民从市内去机场的首选交通工具.机场快线分为经济线和商业线两种,线路,速度和价钱都不同.你有一张商业线车票,可以坐一站商业线,而其他时候只能乘坐经济线.假设换乘时间忽 ...

  6. 编译direct show 的filter项目

    最近搞windows编程,想学习一下direct show.编译了一下sdk里面的一个sample filter,做个笔记,记录一下. 说来渐愧,vc也用了n久了,还没有自己动手建立一个正式的项目,都 ...

  7. sublime配置python开发

    想在sublime里要python shell那种交互或者run module F5 F5 F5下这种效果的话,还是挺容易实现的,windows下的:1. 打开Sublime text 3 安装pac ...

  8. ORACLE数据缓冲区DB cache

    DB CACHE是以数据块为单位组织的缓冲区,数据库刚刚启动的时候,DB CACHE中几乎没有用户数据的缓冲,当会话访问数据库中的表或索引时,首先会检查DB CACHE中是否存在该数据,如果不存在,就 ...

  9. ECC内存

    ECC内存,即应用了能够实现错误检查和纠正技术(ECC)的内存条.一般多应用在服务器及图形工作站上,这将使整个电脑系统在工作时更趋于安全稳定.ECC是“Error Checking and Corre ...

  10. poj3519

    凡是差分约束系统的题目都是转化为d[j]-d[i]<=w[i,j]的形式然后我们建立边i-->j 边权为w[i,j]对于这道题,要求d[n]-d[1]尽可能的大设d[i]为相对差,d[1] ...