javascript - 隐藏 DataGridView 列

Question

我目前正在使用 HeaderText 在 asp:GridView 中显示/隐藏列

现在我需要 HeaderText 没有显示文本，所以我不知道如何重构此语法以根据按钮单击显示/隐藏列。

这是我当前的 C# 和 HTML -> 我该如何更改它，以便它在没有设置 HeaderText 值的情况下仍然可以工作？

   private int GetColumnIndex(GridView grid, string ColName)
{
    foreach (DataControlField col in grid.Columns)
    {
        if (col.HeaderText.ToLower().Trim() == ColName.ToLower().Trim())
        {
            return grid.Columns.IndexOf(col);
        }
    }
    return -1;
}       

protected void btnS_Click(object sender, EventArgs e)
{       
    var columnname = string.Empty;
    foreach (System.Web.UI.WebControls.ListItem item in cbxSponsorLevel.Items)
    {
        columnname = item.Text;
        var index = GetColumnIndex(GridView1, columnname);
        string number = index.ToString();
        if (index > 0)
        {
            GridView1.Columns[index].Visible = item.Selected;
        }
    }
}

<div id="dgv">
    <asp:GridView ID="GridView1" runat="server" Font-Size="9px" CssClass="Grid" AutoGenerateColumns="false" >
<Columns>
    <asp:BoundField DataField="Name" HeaderText="Name" />
    <asp:BoundField DataField="Sport" HeaderText="Sport"> <ItemStyle HorizontalAlign="Center"/></asp:BoundField>
    <asp:BoundField DataField="Event Number" HeaderText="Event"> <ItemStyle HorizontalAlign="Center" /></asp:BoundField>
    <asp:BoundField DataField="Score" HeaderText="Score"> <ItemStyle HorizontalAlign="Center" /></asp:BoundField>
</Columns>        
</asp:GridView></div>

Answer 1

CSS:

<style type="text/css">
    .hidden-field
        {
           display:none;
        }
 </style>

HTML:

<asp:BoundField DataField="Sport" HeaderText="Sport" HeaderStyle-CssClass="hidden-field">
    <ItemStyle HorizontalAlign="Center" />
</asp:BoundField>