sélecteurs Jquery - filtrage ASP.NET GridView

Question

J'ai un gridview et certains contrôles de case à cocher, avec l'idée que seules les lignes avec les cases correspondantes sont affichées.

J'ai composé ce gâchis de JQuery/javascript qui fait réellement le travail, mais porte atteinte à mes yeux, et exécute terriblement. Y at-il un moyen plus simple est et/ou plus rapide d'utiliser les noms de cases à cocher pour filtrer par le texte de la colonne?

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

La sortie HTML à partir du GridView ASP.NET ressemble à ceci:

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

(Ceci est considérablement simplifié de l'original, dans l'espoir de le rendre facile à comprendre le filtrage ne fait. travailler dans le trop original, il est juste lent et moche ...)

Answer 1

Une chose qu'il ralentit est le chemin que vous avez défini vos sélecteurs:

$('.Blue input:checkbox') 

Parce que vous cherchez à peu près par classe jQuery doit passer par chaque élément sur la première page. Si toutefois vous spécifiez un ID alors jQuery peut ignorer la plupart de la page et se concentrer sur un élément DOM spécifique.

donc un meilleur sélecteur serait:

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

Bien sûr, cela a le problème d'obtenir le contrôle d'identité, mais si le JavaScript est sur la même page que vous pourriez utilisateur somethin comme ceci:

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