基于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 相关文章推荐
JS 判断代码全收集
Apr 28 Javascript
取选中的radio的值
Jan 11 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 Javascript
JS获取当前日期时间并定时刷新示例
Mar 04 Javascript
jQuery多条件筛选如何实现
Nov 04 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
Jan 08 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
Apr 22 Javascript
JavaScript基础之静态方法和实例方法分析
Dec 26 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
Feb 19 Javascript
JS使用正则表达式实现常用的表单验证功能分析
Apr 30 Javascript
Javascript前端下载后台传来的文件流代码实例
Aug 18 Javascript
vue+element UI实现树形表格
Dec 29 Vue.js
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
Base64在线编码解码实现代码 演示与下载
2011/01/08 PHP
php实现utf-8和GB2312编码相互转换函数代码
2013/02/07 PHP
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
php删除数组指定元素实现代码
2017/05/03 PHP
php关联数组与索引数组及其显示方法
2018/03/12 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2006/11/24 Javascript
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
firefox和IE系列的相关区别整理 以备后用
2009/12/28 Javascript
JS记录用户登录次数实现代码
2014/01/15 Javascript
10分钟掌握XML、JSON及其解析
2020/12/06 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
微信小程序promsie.all和promise顺序执行
2017/10/27 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
2018/07/13 Javascript
Webpack 4.x搭建react开发环境的方法步骤
2018/08/15 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
2019/06/21 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
JS 事件机制完整示例分析
2020/01/15 Javascript
vue 二维码长按保存和复制内容操作
2020/09/22 Javascript
基于ant design日期控件使用_仅月份的操作
2020/10/27 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
如何用python写一个简单的词法分析器
2018/12/18 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
django页面跳转问题及注意事项
2019/07/18 Python
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
新西兰最大的连锁超市:Countdown
2020/06/04 全球购物
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
院领导写的就业推荐信
2014/03/09 职场文书
党员志愿者活动方案
2014/08/28 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书
yyds什么意思?90后已经听不懂00后讲话了……
2022/02/03 杂记