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="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实现表格编辑功能的更多相关文章
- JAVAEE——BOS物流项目09：业务受理需求分析、创建表、实现自动分单、数据表格编辑功能使用方法和工作单快速录入
1 学习计划 1.业务受理需求分析 n 业务通知单 n 工单 n 工作单 2.创建业务受理环节的数据表 n 业务通知单 n 工单 n 工作单 3.实现业务受理自动分单 n 在CRM服务端扩展方法根据手 ...
- Swift - 给表格添加编辑功能（删除，插入）
1,下面的样例是给表格UITableView添加编辑功能: (1)给表格添加长按功能,长按后表格进入编辑状态 (2)在编辑状态下,第一个分组处于删除状态,第二个分组处于插入状态 (3)点击删除图标,删 ...
- jquery-easyui 中表格的行编辑功能
具体实现代码如下: <table id="tt"></table> $('#tt').datagrid({ title:'Editable DataGrid ...
- swift - 表格的编辑功能（添加、删除）
表格(tableview)的确是一个很好用的控件,现在来实现一个编辑功能的实现,包含添加和删除,删除包括长按删除和左滑删除 效果图如下: 具体代码如下: 1.创建表格(这个表格有2个区,有区头和区尾) ...
- SNF开发平台WinForm之一-开发-单表表格编辑管理页面-SNF快速开发平台3.3-Spring.Net.Framework
1.1运行效果: 1.2开发实现: 1.2.1 首先在数据库中创建需要开发的数据表,在代码生成器中进行配置连接数据库. 代码生成器的Config.xml文件配置如下节点: 1.2.2 ...
- stark组件开发之编辑功能实现
编辑功能.和添加一样! 唯一不同的就是, 需要编辑一个指定的 记录.这就需要,在列表页面, 渲染编辑的时候,添加一个 id 值: class UserInfoHandler(StartHandler ...
- atitit.新增编辑功能 跟orm的实现 attilax p31
atitit.新增编辑功能 跟orm的实现 attilax p31 1. 流程的实现 1 2. view的实现(dwr) 1 3. 获取表结构 1 4. grep filt req params 2 ...
- 在Vue前端界面中，几种数据表格的展示处理，以及表格编辑录入处理操作。
在Vue前端项目中,我这里主要是基于Vue+Element的开发,大多数情况下,我们利用Element的表格组件就可以满足大多数情况的要求,本篇随笔针对表格的展示和编辑处理,综合性的介绍几款表格组件的 ...
- Editable DataGrid 实现列表新增编辑功能
今天在开发一个功能时候,需要直接在列表实现新增.编辑等功能.于是查看easyui 相关文档,找到相关解决办法. easyui的datagrid支持可编辑功能.它使用户能够向数据网格中添加一个新行.用户 ...
随机推荐
- wampsever 数据库初体验
Wamp就是Windos Apache Mysql PHP集成安装环境,即在window下的apache.php和mysql的服务器软件.PHP扩展.Apache模块,开启/关闭鼠标点点就搞定,再 也 ...
- 日期相关---SimpleDateFormat的setLenient(true/false)-----自动计算日期
有时候我们需要判断用户的日期格式是否正确, 虽然绝大多数会在前台处理,但是也有需要从文件流读入的情况,如果日期不合格就需要抛异常,这时候就需要禁止SimpleDateFormat的自动计算功能. 这时 ...
- ios7新特性1-UI变化、UIKit动态行为支持与Text Kit新接口
iOS 7.0新特性1 iOS 7的UI经过了重新设计.另外,iOS7中引入了新的动画系统,便于创建2D和2.5D的游戏.多任务支持提升,点对点通讯以及其他重要的特征使iOS7相对于以往的SDK来说发 ...
- Delphi的Owner与Parent可以不一致，而且Owner不是必须存在（一共7个问题） good
问题1:Owner与Parent不一致:新建一个Form,上面放一个Button1,一个Panel1,然后在Panel1上再放一个Button2,测试结果:procedure TForm1.Butto ...
- 集成activiti-modeler 到 自己的业务系统
本文目的: 将activit 5.12.1 的 modeler 流程设计器 集成到自己的工程中去 解决问题: 1. 复制相关资源文件到自己的工程中 2. 解决modeler的路径访问问题,迁移到非系统 ...
- Volley框架支持HTTPS请求。
第一次写帖子,嘿嘿. 最近了解到google2013IO大会出了个网络框架,正好项目也需要用到,就看了下. 最后发现接口都是HTTPS的,但是Volley默认是不支持HTTPS,网上找了好久,都没有对 ...
- 新图形API为unity5 带来了什么&下一代新图形API的好处
西瓜的演讲ppt翻译+解释+其他: wolf96 在最基本的层面上,这些新api是为了改进CPU性能和效率,通过:减少CPU渲染瓶颈的情况,提供更多可预测和稳定的驱动的行为,给应用程序更多控制,就像在 ...
- 关于Unity的ViewSpace(CameraSpace)的坐标系
从昨天开始遇到一个看似很小,但令我苦恼的问题,由于对Unity的坐标系没有直接搞清楚,所以导致一个shader没看懂,于是发了个贴:http://game.ceeger.com/forum/read. ...
- Two kinds of Quaternion SlerpImp (Unity)
using UnityEngine;using System.Collections; public class SlerpImp{ static float Dot(Quaternion a, Qu ...
- Supervisord管理
原文地址:http://blog.csdn.net/fyh2003/article/details/6837970 学习笔记 Supervisord可以通过sudo easy_install supe ...