GridView Column 显示/隐藏导致 gridview 分页问题的复选框的 onclick答案

【问题标题】：GridView Column show/hide onclick of checkbox causing gridview paging problemsGridView Column 显示/隐藏导致 gridview 分页问题的复选框的 onclick
【发布时间】：2016-09-06 19:56:55
【问题描述】：

我正在从复选框 onclick 事件中调用 showhide() 函数，这个 showhide 函数还隐藏了 Gridview 页面，因为 gridview 寻呼机也由 <tr> 和 <td> 组成，并且在我的代码中我使用了网格视图的索引要隐藏的列。但对于我的要求，我只需要隐藏 gridview 列。有没有办法做到这一点？

<asp:CheckBox ID="chkReceiveDt" runat="server" Checked="true"
              OnClick="showhide(this,'ReceiveDt')" />

  <script type="text/javascript">

    function showhide(sender, ColumnText) {
      var isChecked = $('#' + sender.id).is(":checked");
      var th = $("[id*=GridView1] th:contains(" + ColumnText + ")");
      th.css("display", isChecked ? "" : "none");
      $("[id*=GridView1] tr").each(function () {
        $(this).find("td").eq(th.index()).css("display", isChecked ? "" : "none");
      });

    }

  </script>

【问题讨论】：

我能想到的唯一方法是将行<tr class="pager">中的所有内容复制到一个虚拟表中。
@VDWWD Gridview 寻呼机是动态发生的，所以我无法控制它将 tr 元素复制到虚拟表中。

标签： javascript c# jquery asp.net gridview

【解决方案1】：

在复选框单击事件中，传递您想要隐藏/显示的 Gridview 的列号以在下面起作用。代码运行良好，不会干扰 Gridview 的分页。

<asp:CheckBox ID="chkReceiveDt" runat="server" Checked="true"
                  OnClick="showhideColumn(this,1)" />
    <script type="text/javascript">
     function showhideColumn(sender, col_num)
        {
            var isChecked = $('#' + sender.id).is(":checked");
        var grid = document.getElementById("<%=GridView1.ClientID %>");
        for (i = 1; i < grid.rows.length; i++) {
            grid.rows[i].cells[col_num].style.display = isChecked ? "" : "none";
        }
        }
    </script>

【讨论】：

【解决方案2】：

我今天在关注this作者教程时也遇到了这个问题。想我也会分享我的简单解决方法来解决寻呼机问题。

由于分页器存储在 thead 和 tfoot 中，我们可以在从 gridview 中选择行时忽略它们，只需在选择行时添加以下行：

.not('thead tr').not('tfoot tr');

所以

$("[id*=GridView1] tr").each(function () {
        $(this).find("td").eq(th.index()).css("display", isChecked ? "" : "none");
      });

变成

$("[id*=GridView1] tr").not('thead tr').not('tfoot tr').each(function () {
        $(this).find("td").eq(th.index()).css("display", isChecked ? "" : "none");
      });

不再有分页问题。现在，根据您的 GridView 分页方式，您可能会遇到维护跨 PostBack 的列可见性的问题。为了解决这个问题，我从一个隐藏字段中保存并读取 isChecked，并在 GridView 的 OnRowDataBound 和 Register a Client Script Block 中调整视图。

【讨论】：