Question

我有一个gridview和一些复选框控件，其中只显示了带有相应复选框的行。

我已经编写了这个混乱的JQuery / javascript实际上可以工作但是冒犯了我的眼睛，并且表现非常糟糕。是否有更简单和/或更快捷的方法使用复选框名称按列文本进行过滤？

<script type="text/javascript">
    $(document).ready(function() {
    $('.Red input:checkbox').click(function(event) {
          if (this.checked) {
              jQuery(".EntriesGrid tr:hidden .Colour:contains('Red')").parent().show();
          }
          if (!this.checked) {
              jQuery(".EntriesGrid tr:visible .Colour:contains('Red')").parent().hide();
          }
      });
      $('.Green input:checkbox').click(function(event) {
          if (this.checked) {
              jQuery(".EntriesGrid tr:hidden .Colour:contains('Green')").parent().show();
          }
          if (!this.checked) {
              jQuery(".EntriesGrid tr:visible .Colour:contains('Green')").parent().hide();
          }
      });
      $('.Blue input:checkbox').click(function(event) {
          if (this.checked) {
              jQuery(".EntriesGrid tr:hidden .Colour:contains('Blue')").parent().show();
          }
          if (!this.checked) {
              jQuery(".EntriesGrid tr:visible .Colour:contains('Blue')").parent().hide();
          }
      });
  });
</script>

<span id="filtercheckboxes">
    <asp:CheckBox ID="Red" runat="server" CssClass="Red" Width="5px" Checked="True" />
    <asp:Label runat="server" Text="Red" AssociatedControlID="Red" ID="RedLabel"
        CssClass="RedLabel" />
    <asp:CheckBox ID="Green" runat="server" CssClass="Green" Width="5px" Checked="True" />
    <asp:Label runat="server" Text="Green" AssociatedControlID="Green" ID="GreenLabel"
        CssClass="GreenLabel" />
    <asp:CheckBox ID="Blue" runat="server" CssClass="Blue" Width="5px" Checked="True" />
    <asp:Label runat="server" Text="Blue" AssociatedControlID="Blue" ID="BlueLabel"
        CssClass="BlueLabel" />
</span>

ASP.NET gridview的HTML输出如下所示：

<div class="AspNet-GridView" id="ctl00_ContentPlaceHolder1_GridView1">
    <table summary="" class="EntriesGrid">
        <thead>
            <tr class="headerrow">
                <th scope="col">header</th>
                <th scope="col">header</th>
                <th class="Colour" scope="col">header</th>
                <th scope="col">header</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data</td>
                <td>data</td>
                <td class="Colour">Red</td>
                <td>data</td>
            </tr>
        </tbody>
    </table>
</div>

（这与原版相比大大简化了，希望能让它易于理解。过滤确实在原版中有效，它只是缓慢而丑陋......）

Answer 1

减慢它的一个方法是你定义选择器的方式：

$('.Blue input:checkbox')

因为您正在按类jQuery搜索，所以必须首先浏览页面上的每个项目。但是，如果您指定了一个ID，那么jQuery可以跳过大部分页面并专注于特定的DOM元素。

所以更好的选择器是：

$('#ctl00_ContentPlaceHolder1_GridView1 .Blue input:checkbox')

当然这有获取控件ID的问题，但是如果JavaScript在同一页面上，你可以像这样使用某些东西：

$('#<% GridView1.ClientID %> .Blue input:checkbox')

Jquery选择器 - 过滤ASP.NET gridview

1 个答案: