使用 javascript 控制 gridview 列的可见性答案

【问题标题】：Control gridview column visibility using javascript使用 javascript 控制 gridview 列的可见性
【发布时间】：2010-06-19 05:14:49
【问题描述】：

我有一个 gridview，我必须使用 javascript 控制网格列的可见性。考虑这个网格视图。我有几列。

<asp:GridView ID="grdTest" runat="server" AutoGenerateColumns="False" Width="100%">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:CheckBox ID="chkResource" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Resource">
            <ItemTemplate>
               <asp:Label ID="Resource" Text='<%# Bind("Resource") %>' runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
               <asp:BoundField DataField="Description" HeaderText="Resource Description" HtmlEncode="false">
        <ItemStyle HorizontalAlign="Center" />
        <HeaderStyle HorizontalAlign="Center" />
    </asp:BoundField>

     </asp:TemplateField>
  </Columns>
</asp:GridView>

我可以使用这个来控制这些列在服务器端的可见性 -

grdTest.Columns[n].Visible = false;

但是，我必须使用 javascript 从客户端控制可见性。我尝试了很多，但我只能访问行对象或 gridview 的任何特定单元格。

grid.rows[index].cells[i].style="display: none"; //for cell

有没有办法访问 gridview 的列对象并使用 javascript 控制其可见性？

【问题讨论】：

标签： asp.net javascript gridview

【解决方案1】：

您可以尝试调用服务器端代码。下面是用来调用代码的js函数：

function HideColumns(sender, args)
{
    PageMethods.HideSomeColumns(args, onSuccess, onError);
}

function onReportSuccess(result)
{
}

function onReportError(error)
{
    alert("There was an error.");
}

这是用于隐藏您想要的列的服务器端函数：

[WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static void ReportTranslation(int n)
{
    grdTest.Columns[n].Visible = false;
}

您还有其他选择 - 使用纯 js：

function show_hide_column(col_no, do_show) {

    var stl;
    if (do_show) stl = 'block'
    else         stl = 'none';

    var tbl  = document.getElementById('id_of_table');
    var rows = tbl.getElementsByTagName('tr');

    for (var row=0; row<rows.length;row++) {
      var cels = rows[row].getElementsByTagName('td')
      cels[col_no].style.display=stl;
    }
}

【讨论】：

如果您希望您的表格在所有浏览器中正确呈现，请不要使用上面的 javascript。表格单元格上的 CSS 显示块并非适用于所有浏览器。例如，Chrome 使用“table-cell”。最好通过将其设置为空字符串来删除显示 CSS 设置，而不是将其设置为阻止。这将允许您的浏览器确定它自己的首选显示设置。

【解决方案2】：

更简单的方法是使用 jQuery 并在要显示/隐藏的列的单元格上设置 CSS 类名称。

<asp:GridView ID="grdTest" runat="server" AutoGenerateColumns="False" Width="100%">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate CssClass="hide-me">
                <asp:CheckBox ID="chkResource" runat="server" />
            </ItemTemplate>
       </asp:TemplateField>
    </Columns>
</asp:GridView>

在样式表中默认将可见性设置为 display:none，或者您也可以将其放在单元格的样式中：

.hide-me { display: none; }

然后从 javascript 使用 jQuery:

$('.click-me').click(function(e) {
    $('.hide-me').show();
    // OR you could use toggle:
    $('.hide-me').toggle();
});

【讨论】：