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不显示,不知道大家发现这个问题没有,解决了好几天也没解决,希望各位挚友能给予帮助,再次感谢!

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

原文地址:https://www.cnblogs.com/ZHF/p/1743329.html