代码之家 › 专栏 › 技术社区 › Colin Pickard

Jquery选择器-筛选ASP.NET gridview

gridview jquery asp.net

0

Colin Pickard · 技术社区 · 16 年前

我有一个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>

1 回复 | 直到 16 年前

1

Michael Edwards 16 年前

减慢速度的一个因素是您定义选择器的方式:

$('.Blue input:checkbox')

因为要按类进行搜索,jQuery几乎必须首先检查页面上的每一项。但是,如果您指定了一个ID,那么jQuery可以跳过页面的大部分内容,并将注意力集中在特定的DOM元素上。

因此,更好的选择是:

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

当然,这存在获取控件ID的问题,但如果JavaScript位于同一页面上,您可以使用如下内容:

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