单击复选框显示/隐藏GridView列，导致GridView分页问题

GridView Column show/hide onclick of checkbox causing gridview paging problems

本文关键字：GridView 导致 分页 问题 单击 显示 隐藏 复选框      更新时间：2023-09-26

我从复选框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>

在复选框上单击事件，将您想要隐藏/显示的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>

我今天在遵循作者的教程时也遇到了这个问题。我想我也会分享我的简单的修复问题的pager。

由于分页存储在页眉和页脚中，因此在从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分页的方式，您可能会遇到跨PostBacks维护列可见性的问题。为了解决这个问题，我保存并读取isChecked从一个隐藏的字段，和OnRowDataBound的GridView我注册一个客户端脚本块来调整视图。

相关文章：