Question

我从复选框onclick事件调用showhide（）函数，这个showhide函数也隐藏了Gridview页面，因为gridview寻呼机也是由<tr>和<td>以及我的代码I＆＃形成的39; m使用网格视图列的索引来隐藏。但是对于我的要求，我只需要隐藏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>

Answer 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>

Answer 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分页的方式，您可能会遇到在PostBacks中保持列可见性的问题。为了解决这个问题，我保存并从隐藏字段中读取isChecked，并在GridView I Register a Client Script Block中OnRowDataBound来调整视图。

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

2 个答案: