模拟一个可编辑的DataGrid

    上一篇文章长篇累牍，不知所云。让我把进度加起来，我们只谈技术。

    有时候你会碰到这样的需求，DataGrid中有若干可编辑项，输入信息，点击添加后，DataGrid就添加一行数据，如此多次重复，直到所有数据添加完，点一个按钮，统一保存到数据库。这样设计的一个优势在于，数据添加的工作可以放到一个事务中。

    我老大说这样的DataGrid是有的，不过最近他没研究过，而我尝试时，如果DataGrid绑定的数据为空DataGrid是无法显示出来的。或许，你想绑定一行空数据，可以达到效果——我会在后面尝试。而我在项目中的做法是，用的表格+DataGrid，这也是我标题取为“模拟”的原因。控件代码：

< table  width ="100%"  border ="1" >
                 < tr  align ="center" >
                     < td > 编号 </ td >
                     < td > 姓名 </ td >
                     < td > 昵称 </ td >
                     < td > 性别 </ td >
                     < td > 年龄 </ td >
                     < td > 操作 </ td >
                 </ tr >
                 < tr >
                     < td >< asp:TextBox  ID ="Id"  Runat ="server"  Width ="120px" ></ asp:TextBox ></ td >
                     < td >< asp:TextBox  ID ="Name"  Runat ="server"  Width ="120px" ></ asp:TextBox ></ td >
                     < td >< asp:TextBox  ID ="NickName"  Runat ="server"  Width ="120px" ></ asp:TextBox ></ td >
                     < td >
                         < asp:DropDownList  ID ="Sex"  Runat ="server"  Width ="60px" >
                             < asp:ListItem  Value ="0" > 男 </ asp:ListItem >
                             < asp:ListItem  Value ="1" > 女 </ asp:ListItem >
                         </ asp:DropDownList >
                     </ td >
                     < td >< asp:TextBox  ID ="Age"  Runat ="server"  Width ="120px" ></ asp:TextBox ></ td >
                     < td >< asp:Button  ID ="Save"  Runat ="server" ></ asp:Button ></ td >
                 </ tr >
                 < tr >
                     < td  colspan ="6" >
                         < asp:DataGrid  id ="DataGrid1"  runat ="server"  AutoGenerateColumns ="False"  Width ="100%"  ShowHeader ="False" >
                             < Columns >
                                 < asp:BoundColumn  DataField ="Id"  HeaderText ="编号" ></ asp:BoundColumn >
                                 < asp:BoundColumn  DataField ="Name"  HeaderText ="姓名" ></ asp:BoundColumn >
                                 < asp:BoundColumn  DataField ="NickName"  HeaderText ="昵称" ></ asp:BoundColumn >
                                 < asp:BoundColumn  DataField ="Sex"  HeaderText ="性别" ></ asp:BoundColumn >
                                 < asp:BoundColumn  DataField ="Age"  HeaderText ="年龄" ></ asp:BoundColumn >
                                 < asp:ButtonColumn  Text ="Delete"  HeaderText ="删除" ></ asp:ButtonColumn >
                             </ Columns >
                         </ asp:DataGrid >
                     </ td >
                 </ tr >
             </ table >

表格上带编辑项，而DataGrid不显示页眉。那么首先，我们来完成数据录入的工作：

Page_Load方法中（加上!IsPostBack()判断），获取数据库表结构，初始化全局变量table（DataTable）：

获取数据库表结构（假设数据库表为usermsg），sql为“selec * from usermsg where 1<0”，那么你将得到一个没有数据的表结构，其中包含了你需要的字段，这个方法返回一个DataTable。

接下里一个重要的工作是将DataTable缓存到页面，否则页面上显示的将始终是你最新提交的信息，每次到后台操作数据，都回清空内存，如此，以前保存在内存的数据将丢失。

保存按钮"save"的后台事件中，做如下操作：

1. 获取缓存table = (DataTable)ViewState["Products"]; 利用这个DataTable生成一个DataRow，DataRow row = dt.NewRow(); 接下来，将用户填写的数据保存至DataRow中（row["Id"] = Id.Text;.......如果用到框架，直接一个this.SetControl(row);就可以实现，或者你写一个Page封装一下设置操作，一样的）。

2. 将这个row添加到DataTable中，绑定到DataGrid。

逻辑是这样的：第一次进入页面，获取空表结构，缓存到页面，页面输入数据，点击保存，获取缓存的空表结构，从而得到与之匹配的DataRow，填入数据至DataRow，添加到DataTable，绑定DataTable至DataGrid。如此循环......

DataGrid中，删除按钮方法体中，写删除当前行操作：见上篇Blog，绑定数据。

本身的逻辑很简单，而我在上面也仅仅是描述了它的实现过程，如果有需要源码的，请在Blog评论区留言。

 

ViewState["UserMsg"] = table;添加到Page_Load方法