GirdView实现单选、FooterTemplate实现新建和PagerTemplate实现分页

　　近期采用GridView实现一个信息列表，并且还要对这个列表的信息进行增、删、改操作，同时还需要分页功能。曾今看到有人做过这样的效果，在页脚增加分页操作和新建、修改、删除、保存的操作。

　　点击—>新建，当前页记录集最后一行出现需要录入数据的空行控件。

　　点击—>删除，需要先选中单选行，删除才执行操作。

　　点击—>修改，需要先选中单选行，然后此行处于编辑状态，最后点击保存。

　　实现单选具有两种方法：

　　第一种：在模板列中加入RadioButton控件，通过Group不能实现单选的操作，需要JavaScript代码完成，如下

代码

 1 //判断单选框是否选择
 2  function setRadio(nowRadio) {
 3     var myForm, objRadio;
 4     myForm = document.forms[0];
 5     for (var i = 0; i < myForm.length; i++) {
 6         if (myForm.elements[i].type == "radio") {
 7             objRadio = myForm.elements[i];
 8             if (objRadio != nowRadio && objRadio.name.indexOf("GridView1") > -1 && objRadio.name.indexOf("radBtn") > -1) {
 9                 if (objRadio.checked) {
10                     objRadio.checked = false;
11                 }
12             }
13         }
14     }
15 }

这种办法需要绑定客户端事件

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
//给每个RadioButton1绑定setRadio事件
((RadioButton)e.Row.FindControl("RadioButton1")).Attributes.Add("onclick", "setRadio(this)");
}

　　第二种：在GridView的模版列里，加html控件Radio控件

代码

 1 <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" ShowHeader="False">
 2             <Columns>
 3                 <asp:TemplateField>
 4                     <ItemTemplate>
 5                         <input type="radio" name="myRadio" value='<%# Container.DataItemIndex.ToString() %>'>
 6                     </ItemTemplate>
 7                 </asp:TemplateField>
 8             </Columns>
 9         </asp:GridView>
10  <script type="text/javascript">
11             function setNowRadio(v)
12             {
13                 var myForm,objRadio;
14                 myForm=document.forms[0];
15                 for(var i=0;i<myForm.length;i++)
16                 {
17                     if(myForm.elements[i].type=="radio")
18                     {
19                         objRadio=myForm.elements[i];
20                         if(objRadio.value==v)
21                         {
22                             objRadio.checked=true;
23                         }
24                     }
25                 }
26             }
27             <asp:Literal ID="jsLiteral" runat="server"></asp:Literal>
28         </script>
29

后台可以通过Request.Form["myRadio"].ToString()获取到值，不用遍历控件。

下面是实现分页及其它功能的页面代码：

代码

 1 <asp:GridView ID="GridView1" runat="server"
 2             Width="850px" AllowPaging="True" CellPadding="3" BackColor="White" 
 3             BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px" 
 4             Font-Size="10pt" ForeColor="#333333"
 5             AutoGenerateColumns="False" 
 6             onrowdatabound="GridView1_RowDataBound" 
 7             AllowSorting="True"
 8             >
 9             <Columns>    
10                 <asp:TemplateField AccessibleHeaderText="True" HeaderText="单选">
11                     <ItemTemplate>
12                         <asp:RadioButton ID="radBtn" runat="server" />
13                     </ItemTemplate>
14                     <EditItemTemplate>
15                         <asp:RadioButton ID="radBtn" runat="server" />
16                     </EditItemTemplate>
17                     <FooterTemplate>
18                         <asp:RadioButton ID="radBtn" runat="server" />
19                     </FooterTemplate>
20                     <FooterStyle HorizontalAlign="Center" VerticalAlign="Middle" />
21                     <HeaderStyle Width="40px" />
22                     <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="40px" />
23                 </asp:TemplateField>
24                 <asp:TemplateField HeaderText="编号">
25                     <ItemTemplate>
26                         <asp:Label ID="labId" runat="server" Text='<%#  Bind("id") %>'></asp:Label>
27                     </ItemTemplate>
28                     <EditItemTemplate>
29                         <asp:Label ID="labIdE" ForeColor="Red" runat="server" Text="" Width="60px"></asp:Label>
30                     </EditItemTemplate>
31                     <FooterTemplate>
32                         <asp:Label ID="labIdI" ForeColor="Red" runat="server" Text="" Width="60px"></asp:Label>
33                     </FooterTemplate>
34                     <HeaderStyle Width="60px" />
35                     <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="60px" />
36                 </asp:TemplateField>
37                 <asp:TemplateField HeaderText="名称">
38                     <ItemTemplate>
39                         <a href='<%# "DefSteps.aspx?id=" + Eval("id") %>'><%# Eval("name")%></a>
40                     </ItemTemplate>
41                     <EditItemTemplate>
42                         <asp:TextBox ID="txtNameE" runat="server" Width="200px"></asp:TextBox>
43                     </EditItemTemplate>
44                     <FooterTemplate>
45                         <asp:TextBox ID="txtNameI" runat="server" Width="200px"></asp:TextBox>
46                     </FooterTemplate>
47                     <HeaderStyle Width="200px" />
48                     <ItemStyle HorizontalAlign="Left" VerticalAlign="Middle" Width="200px" />
49                 </asp:TemplateField>
50             </Columns>
51             <FooterStyle BackColor="#C1CEF2" Font-Bold="True" ForeColor="White" />
52             <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
53             <RowStyle BackColor="#EFF3FB" ForeColor="#4A3C8C" />
54             <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" />
55             <HeaderStyle BackColor="#6699CC" Font-Bold="True" Font-Size="Small" ForeColor="White" />
56             <EditRowStyle BackColor="#C1CEF2" />
57             <AlternatingRowStyle BackColor="White" />
58             <PagerTemplate>
59                 <table width="100%">
60                     <tr>
61                         <td align="left">
62                             <asp:Button ID="btnFirst" runat="server" Enabled="<%# ((GridView)Container.Parent.Parent).PageIndex!=0 %>" CausesValidation="False" Text="首页" onclick="btnFirst_Click" />
63                             <asp:Button ID="BtnPre" runat="server" Enabled="<%# ((GridView)Container.Parent.Parent).PageIndex!=0 %>" CausesValidation="False" Text="上一页" onclick="BtnPre_Click" />
64                             <asp:Button ID="BtnNext" runat="server" Enabled="<%# ((GridView)Container.Parent.Parent).PageIndex!=((GridView)Container.Parent.Parent).PageCount-1 %>"
65                     CausesValidation="False" Text="下一页" onclick="BtnNext_Click" />
66                             <asp:Button ID="BtnLast" runat="server" Enabled="<%# ((GridView)Container.Parent.Parent).PageIndex!=((GridView)Container.Parent.Parent).PageCount-1 %>"
67                     CausesValidation="False" Text="尾页" onclick="BtnLast_Click" />
68                         </td>
69                         <td align="center">
70                             当前第<asp:Label ID="LblPage" runat="server" style="text-align:center" Text='<%# GridView1.PageIndex + 1%>'></asp:Label>
71                             页 共<asp:Label ID="LblTotalPage" runat="server" style="text-align:center;" Text='<%# GridView1.PageCount %>'></asp:Label>
72                             页</td>
73                         <td align="right">
74                             <asp:Button ID="BtnAdd" runat="server" CommandName="Insert" onclick="BtnAdd_Click" Text="添加" />
75                             <asp:Button ID="BtnModify" runat="server" CommandName="Update" onclick="BtnModify_Click" Text="编辑" />
76                             <asp:Button ID="BtnDelete" runat="server" CommandName="Delete" Text="删除" 
77                                 onclick="BtnDelete_Click" />
78                             <asp:Button ID="BtnSave" runat="server" CommandName="Save" onclick="BtnSave_Click" Text="保存" />
79                             <asp:Button ID="BtnCancel" runat="server" CommandName="Cancel" Text="取消" 
80                                 onclick="BtnCancel_Click" />
81                         </td>
82                     </tr>
83                 </table>               
84             </PagerTemplate> 
85         </asp:GridView>

具体的分页功能不是很难，也就不在这写了。

新建：GridView1.ShowFooter = true

删除：先判断是否选中操作

代码

 1 protected void BtnDelete_Click(object sender, EventArgs e)
 2     {
 3         index = 0;
 4         int checkNum = 0;
 5         string id = "";
 6         foreach (GridViewRow gvr in GridView1.Rows)
 7         {
 8             if (((RadioButton)gvr.FindControl("radBtn")).Checked)
 9             {
10                 index = gvr.RowIndex;
11                 checkNum = 1;
12                 id =((Label)GridView1.Rows[index].FindControl("labId")).Text;
13                 DeleteChart(id);//执行删除操作
14              }
15         }
16         ViewData();//填充数据
17          if (checkNum == 0)
18         {
19             ScriptManager.RegisterStartupScript(this, typeof(Page), "提示", "<script>alert('选择要删除的行');</script>", false);
20             return;
21         }
22     }

效果图如下：

求助：在一次的误操作过程中发现了一个问题，就是当记录少于每页显示的记录数时，只有一页数据，PagerTemplate不显示，不知道大家发现这个问题没有，解决了好几天也没解决，希望各位挚友能给予帮助，再次感谢！

同时也希望各位朋友提出好的方法，共同交流共同进步！

posted on 2010-05-25 09:54 ZEKELOVE 阅读(1470) 评论(5) 编辑收藏举报