在 ASP.NET 中显示/隐藏 GridView 列答案

【问题标题】：Show / Hide GridView Columns in ASP.NET在 ASP.NET 中显示/隐藏 GridView 列
【发布时间】：2014-09-02 06:25:07
【问题描述】：

我正在使用 C# 在 Visual Studio 2012 中创建一个 Web 项目，该项目从数据库中获取数据并显示在网格视图中。数据库中有许多列，它们按原样显示在网格视图上。我想为用户提供一个选项，以使用复选框消除不需要的列，并且在检查后，单击按钮必须更新。

到目前为止，我已经尝试过执行下面显示的代码，但没有成功。

protected void btn_modify_Click(object sender, EventArgs e)
{
    if (CheckBox2.Checked)
    {

        this.GridView1.Columns[2].Visible = false;        

    }
    else
    {        
        this.GridView1.Columns[2].Visible = true;
    }
}

.aspx代码如下。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Reporting Mopdule.aspx.cs" Inherits="WebApplication1.Reporting_Mopdule" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajax" %>

<!DOCTYPE html>



<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .newStyle1 {
            font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
            font-size: x-large;
        }
        .newStyle2 {
            font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
            color: #0000FF;
        }
        .newStyle3 {
            font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
            color: #0000FF;
        }
        .newStyle4 {
            color: #0000FF;
            font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
        }
        .newStyle5 {
            font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
            color: #0000FF;
        }
        .auto-style3 {
            width: 122px;
        }
        .newStyle6 {
            font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
            font-size: x-large;
        }
        .newStyle7 {
            position: absolute;
        }
        .auto-style5 {
            width: 117px;
        }
        .auto-style7 {
            width: 59px;
        }
        .auto-style8 {
            width: 65px;
        }
        .newStyle8 {
            position: absolute;
        }
        .newStyle9 {
            position: absolute;
        }
        .auto-style9 {
            width: 305px;
        }
        .newStyle10 {
            position: absolute;
        }
        .newStyle11 {
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <form id="form1" runat="server">
    <div>
    <ajax:ToolkitScriptManager ID="toolkit1" runat="server"></ajax:ToolkitScriptManager>
    </div>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <table style="width:100%;">
            <caption style="width: 478px">
                <asp:Label ID="Label6" runat="server" CssClass="newStyle6" Font-Bold="True" Text="Report On Energy Development"></asp:Label>
            </caption>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </table>
&nbsp;
        <table style="width: 69%; margin-top: 0px; height: 303px;">
            <caption>
                <br />
            </caption>
            <tr>
                <td class="auto-style5">
                    <asp:Label ID="Label1" runat="server" CssClass="newStyle2" Text="State"></asp:Label>
                </td>
                <td>
                    <asp:Label ID="Label2" runat="server" CssClass="newStyle3" Text="Cluster"></asp:Label>
                </td>
                <td class="auto-style9">
                    <asp:Label ID="Label3" runat="server" CssClass="newStyle4" Text="DateFrom : "></asp:Label>
                </td>
                <td class="auto-style3">
                    <asp:Label ID="Label4" runat="server" CssClass="newStyle5" Text="DateTo :"></asp:Label>
                </td>
                <td class="auto-style7">&nbsp;</td>
                <td class="auto-style8">
                    <asp:Button ID="Button3" runat="server" Height="34px" OnClick="Button3_Click" Text="Export To Excel" Width="138px" />
                </td>
                <td class="auto-style8" rowspan="11">
                    <asp:Panel ID="Panel1" runat="server" Width="224px">
                        <table style="width: 99%;">
                            <tr>
                                <td>
                                    <asp:CheckBox ID="CheckBox17" runat="server" AutoPostBack="True" OnCheckedChanged="CheckBox17_CheckedChanged" Text="All" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBox ID="CheckBox2" runat="server" Text="SerialNo" OnCheckedChanged="CheckBox2_CheckedChanged" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBox ID="CheckBox11" runat="server" Text="Load_Enegy_Cumulative" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBox ID="CheckBox3" runat="server" Text="SiteName" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBox ID="CheckBox12" runat="server" Text="Mains_Energy_Daily" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBox ID="CheckBox4" runat="server" Text="SiteId" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBox ID="CheckBox13" runat="server" Text="Mains_Energy_Cumulative" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBox ID="CheckBox5" runat="server" Text="State" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBox ID="CheckBox14" runat="server" Text="Solar_Energy_Daily" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBox ID="CheckBox6" runat="server" OnCheckedChanged="CheckBox6_CheckedChanged" Text="Cluster" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBox ID="CheckBox15" runat="server" Text="Solar_Energy_Cumulative" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBox ID="CheckBox7" runat="server" Text="Date" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBox ID="CheckBox16" runat="server" Text="Generate_Date" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBox ID="CheckBox8" runat="server" Text="Dg_Energy_Daily" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBox ID="CheckBox9" runat="server" Text="Dg_Energy_Cumulative" />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <asp:CheckBox ID="CheckBox10" runat="server" Text="Load_Energy_Daily" />
                                </td>
                            </tr>
                        </table>
                    </asp:Panel>
                </td>
            </tr>
            <tr>
                <td class="auto-style5">
                    <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
                    </asp:DropDownList>
                </td>
                <td>
                    <asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="True">
                    </asp:DropDownList>
                </td>
                <td class="auto-style9">
                    <asp:TextBox ID="TextBox1" runat="server"  style="margin-top: 0px" OnTextChanged="TextBox1_TextChanged"></asp:TextBox>
                    <ajax:CalendarExtender ID="TextBox1_CalendarExtender" runat="server" Enabled="True" TargetControlID="TextBox1">
                    </ajax:CalendarExtender>
                </td>
                <td class="auto-style3">
                    <asp:TextBox ID="TextBox2" runat="server" OnTextChanged="TextBox2_TextChanged" ></asp:TextBox>
                    <ajax:CalendarExtender ID="TextBox2_CalendarExtender" runat="server" Enabled="True" TargetControlID="TextBox2">
                    </ajax:CalendarExtender>
                </td>
                <td class="auto-style7">
                    <asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" />
                </td>
                <td class="auto-style8">
                    <asp:Button ID="Button4" runat="server" Height="30px" OnClick="Button4_Click" Text="Export To PDF" Width="139px" />
                </td>
            </tr>
            <tr>
                <td class="auto-style5">
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
                <td class="auto-style9">
                    &nbsp;</td>
                <td class="auto-style3">
                    <asp:TextBox ID="TextBox3" runat="server" AutoPostBack="True"></asp:TextBox>
                </td>
                <td class="auto-style7">&nbsp;</td>
                <td class="auto-style8">
                    <asp:Button ID="Button5" runat="server" OnClick="Button5_Click" Text="Hide" Width="44px" />
                    <asp:Button ID="Button6" runat="server" OnClick="Button6_Click" Text="Show" />
                </td>
            </tr>
            <tr>
                <td class="auto-style5">
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
                <td class="auto-style9">
                    &nbsp;</td>
                <td class="auto-style3">
                    &nbsp;</td>
                <td class="auto-style7">
                    &nbsp;</td>
                <td class="auto-style8">
                    <asp:Button ID="Button7" runat="server" Height="31px" OnClick="Button7_Click" Text="Modify Table" Width="139px"
                        />
                </td>
            </tr>
            <tr>
                <td class="auto-style5">&nbsp;</td>
                <td>&nbsp;</td>
                <td class="auto-style9">&nbsp;</td>
                <td class="auto-style3">&nbsp;</td>
                <td class="auto-style7">&nbsp;</td>
                <td class="auto-style8">
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="auto-style5">&nbsp;</td>
                <td>&nbsp;</td>
                <td class="auto-style9">&nbsp;</td>
                <td class="auto-style3">&nbsp;</td>
                <td class="auto-style7">&nbsp;</td>
                <td class="auto-style8">
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="auto-style5">&nbsp;</td>
                <td>&nbsp;</td>
                <td class="auto-style9">&nbsp;</td>
                <td class="auto-style3">&nbsp;</td>
                <td class="auto-style7">&nbsp;</td>
                <td class="auto-style8">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </td>
            </tr>
            <tr>
                <td class="auto-style5">&nbsp;</td>
                <td>&nbsp;</td>
                <td class="auto-style9">&nbsp;</td>
                <td class="auto-style3">&nbsp;</td>
                <td class="auto-style7">&nbsp;</td>
                <td class="auto-style8">&nbsp;</td>
            </tr>
            <tr>
                <td class="auto-style5">
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
                <td class="auto-style9">&nbsp;</td>
                <td class="auto-style3">&nbsp;</td>
                <td class="auto-style7">&nbsp;</td>
                <td class="auto-style8">&nbsp;</td>
            </tr>
            <tr>
                <td class="auto-style5">
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
                <td class="auto-style9">
                    &nbsp;</td>
                <td class="auto-style3">
                    &nbsp;</td>
                <td class="auto-style7">
                    &nbsp;</td>
                <td class="auto-style8">
                    &nbsp;</td>
            </tr>
            <tr>
                <td class="auto-style5">
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
                <td class="auto-style9">
                    &nbsp;</td>
                <td class="auto-style3">
                    &nbsp;</td>
                <td class="auto-style7">
                    &nbsp;</td>
                <td class="auto-style8">
                    &nbsp;</td>
            </tr>
        </table>
&nbsp;&nbsp;<table style="width:100%;">
            <tr>
                <td>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:GridView ID="GridView1" runat="server" CellPadding="3" Height="185px" OnSelectedIndexChanged="GridView1_SelectedIndexChanged" Width="297px" AutoGenerateColumns="false" BackColor="#DEBA84" BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px" CellSpacing="2">
                    <FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
                    <HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
                    <PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
                    <PagerTemplate>
                        <asp:CheckBox ID="CheckBox1" runat="server" />
                    </PagerTemplate>
                    <RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />
                    <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
                    <SortedAscendingCellStyle BackColor="#FFF1D4" />
                    <SortedAscendingHeaderStyle BackColor="#B95C30" />
                    <SortedDescendingCellStyle BackColor="#F1E5CE" />
                    <SortedDescendingHeaderStyle BackColor="#93451F" />
                </asp:GridView>
            </ContentTemplate>
        </asp:UpdatePanel>
                </td>
            </tr>
        </table>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
    </form>
</body>
</html>

在下图中，您可以看到许多复选框。我希望用户通过单击复选框来选择他们需要的所有列，并且在单击“修改表”按钮后，只有这些列才会显示在网格视图中。

【问题讨论】：

您能提供您的 .aspx 代码吗？方便我们为您解答。
我已按照您的要求添加了 .aspx 代码。
我已为您发表评论。请检查一下。
我已经用列更新了代码。

标签： c# asp.net gridview

【解决方案1】：

您可以使用以下代码

protected void btn_modify_Click(object sender, EventArgs e)
{
      foreach (ListItem val in CheckBoxList.Items)
      {
          if (val.Checked)
           {
               this.GridView1.Columns[0].Visible = false;
                               .
                               .
                               .
           }
          else
           {
               this.GridView1.Columns[0].Visible = true;
           }
      }
}

【讨论】：

【解决方案2】：

试试这个，使用列名可以实现这一点。

<asp:GridView ID="GridView1" runat="server" CellPadding="3" Height="185px" Width="297px"
     BackColor="#DEBA84" BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px"  CellSpacing="2">
                        <Columns>
                            <asp:BoundField HeaderText="ColumnName" DataField="ColumnName" />
                            <%--Add Boundfield as per your columns--%>
                            <asp:BoundField HeaderText="ColumnName" DataField="ColumnName" />
                        </Columns>
</asp:GridView>

【讨论】：

@jilu 您必须为此使用 itemdatabound 或 itemtemplate。如果您直接绑定数据，则无法在代码中获取任何列索引。
谢谢你的回复...你能告诉我我该怎么做吗？因为我在编程方面不是那么好...您的帮助将不胜感激。
好的...之后如何使用复选框隐藏列。（我希望我的应用只显示用户在复选框中选中的那些列）
使用 boundfield 后，您可以通过代码查看您的列的真假。
感谢您的帮助。 :) 是否可以按名称显示列？

【解决方案3】：

在 gridview 的行创建事件中尝试此代码：

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
if(checkbox2.checked)
e.Row.Cells[2].Visible = false; 
else
e.Row.Cells[2].Visible = true;
}

点击按钮时调用绑定网格的方法

【讨论】：

如何使行索引号与复选框相连，以便用户可以选择他们想要查看的所有列。
我没找到你。与复选框连接是什么意思

【解决方案4】：

不要删除该列：GridView1.Columns.RemoveAt(2);

protected void btn_modify_Click(object sender, EventArgs e)
{
    GridView1.Columns[1].Visible = false;
    GridView1.Columns[0].Visible = false;
    if (CheckBox2.Checked)
    {

        TextBox3.Enabled = false;
        //GridView1.Visible = false; --> Hides the whole Gridview
        this.GridView1.Columns[2].Visible = false;
        //GridView1.Columns.RemoveAt(2);

    }
    else
    {
        TextBox3.Enabled = true;
        GridView1.Visible = true;
        this.GridView1.Columns[2].Visible = true;

    }
}

当您的列是自动生成的（默认值=true）时，您可以通过创建单元格来更改可见性。如果所有单元格都不可见，则该列将自动隐藏

protected void gridview1_RowDataBound(object sender, GridViewRowEventArgs e)
{

    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        //ShowColumn Check
        if (CheckBox2.Checked)
        {
            e.Row.Cells[2].Visible = false;
        }
        else
        {
            e.Row.Cells[2].Visible = true;
        }   
    }
}

只显示选定的行：

1.) 添加一个新的templateColumn（在第一个位置）：

<Columns>
   <asp:TemplateField>
        <ItemTemplate>
            <asp:CheckBox runat="server"/>
        </ItemTemplate>
    </asp:TemplateField>
</Columns>

2.) 添加新按钮

<asp:Button runat="server" ID="FilterSelected" OnClick="FilterSelected_Click"/>

3.) 添加一个新的 ClickEvent 代码：

protected void FilterSelected_Click(object sender, EventArgs e)
{
    foreach (GridViewRow rowItem in gridview1.Rows )
    {
        var myCheckbox = rowItem.Cells[0].Controls[1] as CheckBox; // ONLY if your Checkbox in the FIRST column!!!!

            if (myCheckbox != null && !myCheckbox.Checked)
            {
                rowItem.Visible = false;
            }   
        }
    }
}

【讨论】：

我收到“ArgumentOutOfRangeException 未处理”错误。
任何更好的建议将不胜感激。
hmm... ArgumentOutOfRangeException 是否未处理由 GridView1.Columns[2].Visible 触发？
听起来您正在使用默认设置为 AutoGenerateColumns=true 的 GridView。我建议设置 AutoGenerateColumns=false 并手动添加列。
我对代码做了一些改动，请再次查看代码。