网站导航免费论文 原创论文 论文搜索 作业答案 网学软件 学术大家 资料中心 会员中心 问题解答 定作论文 论文素材 设计下载 最新论文 下载排行 论文上传 在线投稿 联系我们
返回网学首页
最新论文 推荐专题 热门论文 素材专题
当前位置: 网学 > 设计资源 > JS代码 > 正文
用一句JQuery代码实现表格的简单筛选
来源:Http://myeducs.cn 联系QQ:点击这里给我发消息 作者: Admin 发布时间: 10/08/08

JQuery的强大之处,这里就不用讲了。这里将用一行简单的JQuery代码实现简单的表格筛选。先贴上代码:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqueryTableFilter.aspx.cs" Inherits="JqueryTableFilter" %>  
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8.  
  9.     <script src="Script/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>     
  10.     <script type="text/javascript">  
  11.         $(function() {  
  12.         $("#Text1").keyup(function() {  
  13.         var filterText = $(this).val();  
  14.             $("#<%=GridView1.ClientID %> tr").not(":first").hide().filter(":contains('" + filterText + "')").show();;  
  15.         }).keyup();  
  16.         });  
  17.     </script>  
  18. </head>  
  19. <body>  
  20.     <form id="form1" runat="server">  
  21.     <div style="width:60%;">  
  22.         <input id="Text1" type="text" />  
  23.         <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"  
  24.             DataKeyNames="OrderID" DataSourceID="SqlDataSource1"  
  25.             HorizontalAlign="Left" PageSize="50" >  
  26.             <Columns>  
  27.                 <asp:BoundField DataField="OrderID" HeaderText="OrderID" ReadOnly="True"  
  28.                     SortExpression="OrderID" InsertVisible="False" />  
  29.                 <asp:BoundField DataField="CustomerID" HeaderText="CustomerID"  
  30.                     SortExpression="CustomerID" />  
  31.                 <asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID"  
  32.                     SortExpression="EmployeeID" />  
  33.                 <asp:BoundField DataField="OrderDate" HeaderText="OrderDate"  
  34.                     SortExpression="OrderDate" />  
  35.                 <asp:BoundField DataField="RequiredDate" HeaderText="RequiredDate"  
  36.                     SortExpression="RequiredDate" />  
  37.                 <asp:BoundField DataField="ShippedDate" HeaderText="ShippedDate"  
  38.                     SortExpression="ShippedDate" />  
  39.                 <asp:BoundField DataField="ShipVia" HeaderText="ShipVia"  
  40.                     SortExpression="ShipVia" />  
  41.                 <asp:BoundField DataField="Freight" HeaderText="Freight"  
  42.                     SortExpression="Freight" />                 
  43.             </Columns>  
  44.         </asp:GridView>  
  45.         <asp:SqlDataSource ID="SqlDataSource1" runat="server"  
  46.             ConnectionString="<%contentnbsp;ConnectionStrings:NorthwindConnectionString %>"  
  47.             SelectCommand="SELECT top 50 * FROM [Orders]"></asp:SqlDataSource>  
  48.     </div>  
  49.     </form>  
  50. </body>  
  51. </html>  

image

这里是经过筛选的截图;

JQuery代码就:

  1. $(function() {  
  2. $("#Text1").keyup(function() {  
  3. var filterText = $(this).val();  
  4.     $("#<%=GridView1.ClientID %> tr").not(":first").hide().filter(":contains('" + filterText + "')").show();;  
  5. }).keyup();  
  6. });  

里面最重要的就是JQuery的选择器:

1:$("#<%=GridView1.ClientID %> tr")选择表格的所有行;

2:not(":first"):除去第一行表头行;

3:filter(":contains('" + filterText + "')"):从上面所选择的行里面筛选出行文本中包含filterText 的行显示出来;

4:最后加一句keyup()是为了在提交后重新触发keyup事件。(但是在这里没有作用因为我用的客户端控件没有ViewState

    若是服务器端控件就会看见他的作用)。

JQuery的选择器的强大之处,让我们能救这么简单的实现客户端的简单筛选。最后加一句关于表格筛选有JQuery插件提供

给我们选择, 但是这种简单的功能,我不会去选择加入一个JavaScript文件库,呵呵。

网学推荐

免费论文

原创论文

浏览:
设为首页 | 加入收藏 | 论文首页 | 论文专题 | 设计下载 | 网学软件 | 论文模板 | 论文资源 | 程序设计 | 关于网学 | 站内搜索 | 网学留言 | 友情链接 | 资料中心
版权所有 电话:013574892963 QQ:3710167 邮箱:Educs@163.com 网学网 [Myeducs.cn] 您电脑的分辨率是 像素
Copyright 2008-2015 Www.myeducs.Cn All Rights Reserved
湘ICP备09003080号