现在的位置: 首页 > 综合 > 正文

模拟一个可编辑的DataGrid

2013年04月10日 ⁄ 综合 ⁄ 共 3155字 ⁄ 字号 评论关闭

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

    有时候你会碰到这样的需求,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方法

抱歉!评论已关闭.