作者:犹豫的海波V5_697 | 来源:互联网 | 2018-06-16 13:10
效果图:
代码:
代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqueryTableFilter.aspx.cs" Inherits="JqueryTableFilter" %>
DataKeyNames="OrderID" DataSourceID="SqlDataSource1" HorizOntalAlign="Left" PageSize="50" > SortExpression="OrderID" InsertVisible="False" /> SortExpression="CustomerID" /> SortExpression="EmployeeID" /> SortExpression="OrderDate" /> SortExpression="RequiredDate" /> SortExpression="ShippedDate" /> SortExpression="ShipVia" /> SortExpression="Freight" /> COnnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT top 50 * FROM [Orders]">
JQuery代码就:
代码如下:
$(function() { $("#Text1").keyup(function() { var filterText = $(this).val(); $("#<%=GridView1.ClientID %> tr").not(":first").hide().filter(":contains('" + filterText + "')").show();; }).keyup(); });
里面最重要的就是JQuery的选择器:
1:$("#<%=GridView1.ClientID %> tr")选择表格的所有行;
2:not(":first"):除去第一行表头行;
3:filter(":contains('" + filterText + "')"):从上面所选择的行里面筛选出行文本中包含filterText 的行显示出来;
4:最后加一句keyup()是为了在提交后重新触发keyup事件。(但是在这里没有作用因为我用的客户端控件没有ViewState
若是服务器端控件就会看见他的作用)。
JQuery的选择器的强大之处,让我们能救这么简单的实现客户端的简单筛选。最后加一句关于表格筛选有JQuery插件提供
给我们选择, 但是这种简单的功能,我不会去选择加入一个Javascript文件库,呵呵。
作者:破 浪