jQuery选择 - 过滤ASP.NET的GridView

问题描述

我有一个GridView和一些CheckBox控件，与只与相应的复选框中的行显示的想法。

I've got a gridview and some checkbox controls, with the idea that only the rows with the corresponding checkboxes are shown.

我的JQuery组成/ JavaScript的，实际上做的工作，但冒犯了我的眼睛，可怕的执行这个烂摊子。是否有使用复选框名称由列文字进行筛选的简单和/或更快的方式？

I've composed this mess of JQuery/javascript which actually does work but offends my eyes, and performs terribly. Is there are a simpler and/or faster way of using the checkbox names to filter by the column text?

<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如下：

The HTML output from the ASP.NET gridview looks like this:

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

（这极大地从原来的简化，在使之易于理解的希望。过滤并实际上在原来工作过，它只是缓慢的和丑陋的...）

(This is dramatically simplified from the original, in the hope of making it easy to understand. The filtering does actually work in the original too, it's just slow and ugly...)

推荐答案

这减慢它的一件事是你定义了你选择的方式：

One thing that slows it down is the way that you have defined your selectors:

$('.Blue input:checkbox')

由于您是通过类的jQuery pretty搜索多少要经过每一个项目在页面上第一。然而，如果你指定一个ID，然后在jQuery的大部分内容可以跳过页面，专注特定的DOM元素。

Because you are searching by class jQuery pretty much has to go through every item on the page first. If however you specify an ID then jQuery can skip most of the page and concentrate on a specific DOM element.

因此​​，一个更好的选择应该是：

So a better selector would be:

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

当然，这具有获得控制标识的问题，但如果在JavaScript是在同一页上你可以用户事端是这样的：

Of course this has the problem of getting the controls ID but if the JavaScript is on the same page you could user somethin like this:

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

这篇关于jQuery选择 - 过滤ASP.NET的GridView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！