基于JQuery的一句代码实现表格的简单筛选


Posted in Javascript onJuly 26, 2010

效果图:
基于JQuery的一句代码实现表格的简单筛选
代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqueryTableFilter.aspx.cs" Inherits="JqueryTableFilter" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<script src="Script/jquery-1.3.2-vsdoc.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function() { 
$("#Text1").keyup(function() { 
var filterText = $(this).val(); 
$("#<%=GridView1.ClientID %> tr").not(":first").hide().filter(":contains('" + filterText + "')").show();; 
}).keyup(); 
}); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div style="width:60%;"> 
<input id="Text1" type="text" /> 
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
DataKeyNames="OrderID" DataSourceID="SqlDataSource1" 
HorizontalAlign="Left" PageSize="50" > 
<Columns> 
<asp:BoundField DataField="OrderID" HeaderText="OrderID" ReadOnly="True" 
SortExpression="OrderID" InsertVisible="False" /> 
<asp:BoundField DataField="CustomerID" HeaderText="CustomerID" 
SortExpression="CustomerID" /> 
<asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" 
SortExpression="EmployeeID" /> 
<asp:BoundField DataField="OrderDate" HeaderText="OrderDate" 
SortExpression="OrderDate" /> 
<asp:BoundField DataField="RequiredDate" HeaderText="RequiredDate" 
SortExpression="RequiredDate" /> 
<asp:BoundField DataField="ShippedDate" HeaderText="ShippedDate" 
SortExpression="ShippedDate" /> 
<asp:BoundField DataField="ShipVia" HeaderText="ShipVia" 
SortExpression="ShipVia" /> 
<asp:BoundField DataField="Freight" HeaderText="Freight" 
SortExpression="Freight" /> 
</Columns> 
</asp:GridView> 
<asp:SqlDataSource ID="SqlDataSource1" runat="server" 
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
SelectCommand="SELECT top 50 * FROM [Orders]"></asp:SqlDataSource> 
</div> 
</form> 
</body> 
</html>
 
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文件库,呵呵。
作者:破  浪

Javascript 相关文章推荐
使用户点击后退按钮使效三行代码
Jul 07 Javascript
兼容ie和firefox js关闭代码
Dec 11 Javascript
My Desktop :) 桌面式代码
Dec 29 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
Jun 23 Javascript
JS逆序遍历实现代码
Dec 02 Javascript
JavaScript数据结构和算法之图和图算法
Feb 11 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
30分钟快速入门掌握ES6/ES2015的核心内容(上)
Apr 18 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
js打开word文档预览操作示例【不是下载】
May 23 Javascript
vue实现计算器功能
Feb 22 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
Nov 05 Javascript
jQuery getJSON 处理json数据的代码
Jul 26 #Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
Jul 25 #Javascript
用jquery实现下拉菜单效果的代码
Jul 25 #Javascript
利用腾讯的ip地址库做ip物理地址定位
Jul 24 #Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
Jul 24 #Javascript
来自qq的javascript面试题
Jul 24 #Javascript
6个DIV 135或246间隔一秒轮番显示效果
Jul 24 #Javascript
You might like
获得Google PR值的PHP代码
2007/01/28 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
2007/03/24 Javascript
JavaScript中的property和attribute介绍
2011/12/26 Javascript
获取非最后一列td值并将title设为该值的方法
2013/10/30 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
Node.js websocket使用socket.io库实现实时聊天室
2017/02/20 Javascript
Bootstrap进度条实现代码解析
2017/03/07 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
2017/07/12 Javascript
EasyUI实现下拉框多选功能
2017/11/07 Javascript
Vue组件化开发思考
2018/02/02 Javascript
详解Vue底部导航栏组件
2019/05/02 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
nodeJS与MySQL实现分页数据以及倒序数据
2020/06/05 NodeJs
浅要分析Python程序与C程序的结合使用
2015/04/07 Python
pymssql数据库操作MSSQL2005实例分析
2015/05/25 Python
Django接受前端数据的几种方法总结
2016/11/04 Python
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
PyTorch使用cpu加载模型运算方式
2020/01/13 Python
jupyter notebook 恢复误删单元格或者历史代码的实现
2020/04/17 Python
Python 在函数上添加包装器
2020/07/28 Python
HTML5中的postMessage API基本使用教程
2016/05/20 HTML / CSS
银行会计职员个人的自我评价
2013/09/29 职场文书
架构师岗位职责
2013/11/18 职场文书
《中彩那天》教学反思
2014/02/22 职场文书
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
环卫工人节活动总结
2014/08/29 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
2015年党员干部承诺书
2015/01/21 职场文书
详解Nginx 工作原理
2021/03/31 Servers
基于Redis延迟队列的实现代码
2021/05/13 Redis
Nginx中使用Lua脚本与图片的缩略图处理的实现
2022/03/18 Servers
深入理解MySQL中MVCC与BufferPool缓存机制
2022/05/25 MySQL