jQuery数据检索中根据关键字快速定位GridView指定行的实现方法


Posted in Javascript onJune 08, 2016

本文实例讲述了jQuery数据检索中根据关键字快速定位GridView指定行的实现方法。分享给大家供大家参考,具体如下:

运行截图如下:

jQuery数据检索中根据关键字快速定位GridView指定行的实现方法

具体代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ShowGridviewContent.aspx.cs" Inherits="ShowGridviewContent" %>
<!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 id="Head1" runat="server">
  <title></title>
  <style type="text/css">
    .hightlite
    {
      background-color:Gray;
    }
  </style>
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript">
    $(function () {
      $("#searchBtn").click(function () {
        var search = $("#SearchWord").val();
        var row = $('#grdEmployees >tbody >tr');
        var rowcolumn = $('#grdEmployees >tbody >tr >td');
        row.removeClass('hightlite');
        rowcolumn.each(function (column) {
          var match = $(this).html();
          if (match == search) {
            $(this).parent().addClass('hightlite');
          }
        });
      });
    });
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <div>
  <input type="text" id="SearchWord" /><input type="button" id="searchBtn" value="快速定位行" />
  <asp:GridView ID="grdEmployees" runat="server" AllowPaging="true" PageSize="10"
   AutoGenerateColumns="false" DataSourceID="objectDataSource" class="gv" >
   <Columns>
    <asp:BoundField DataField="ID" HeaderText="ID" />
    <asp:BoundField DataField="FName" HeaderText="FName" />
    <asp:BoundField DataField="MName" HeaderText="MName" />
    <asp:BoundField DataField="LName" HeaderText="LName" />
    <asp:BoundField DataField="DOB" HeaderText="时间" DataFormatString="{0:MM/dd/yyyy}" />
    <asp:BoundField DataField="Sex" HeaderText="性别" />
   </Columns>
   </asp:GridView>
   <asp:ObjectDataSource ID="objectDataSource" runat="server" SelectMethod="GetEmployeeList" TypeName="Employee"></asp:ObjectDataSource>
  </div>
  </form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
/// <summary>
///Employee 的摘要说明
/// </summary>
public class Employee
{
  public int ID { get; set; }
  public string FName { get; set; }
  public string MName { get; set; }
  public string LName { get; set; }
  public DateTime DOB { get; set; }
  public char Sex { get; set; }
  public List<Employee> GetEmployeeList()
  {
    List<Employee> empList = new List<Employee>();
    empList.Add(new Employee() { ID = 1, FName = "John", MName = "", LName = "Shields", DOB = DateTime.Parse("12/11/1971"), Sex = 'M' });
    empList.Add(new Employee() { ID = 2, FName = "Mary", MName = "Matthew", LName = "Jacobs", DOB = DateTime.Parse("01/17/1961"), Sex = 'F' });
    empList.Add(new Employee() { ID = 3, FName = "Amber", MName = "Carl", LName = "Agar", DOB = DateTime.Parse("12/23/1971"), Sex = 'M' });
    empList.Add(new Employee() { ID = 4, FName = "Kathy", MName = "", LName = "Berry", DOB = DateTime.Parse("11/15/1976"), Sex = 'F' });
    empList.Add(new Employee() { ID = 5, FName = "Lena", MName = "Ashco", LName = "Bilton", DOB = DateTime.Parse("05/11/1978"), Sex = 'F' });
    empList.Add(new Employee() { ID = 6, FName = "Susanne", MName = "", LName = "Buck", DOB = DateTime.Parse("03/7/1965"), Sex = 'F' });
    empList.Add(new Employee() { ID = 7, FName = "Jim", MName = "", LName = "Brown", DOB = DateTime.Parse("09/11/1972"), Sex = 'M' });
    empList.Add(new Employee() { ID = 8, FName = "Jane", MName = "G", LName = "Hooks", DOB = DateTime.Parse("12/11/1972"), Sex = 'F' });
    empList.Add(new Employee() { ID = 9, FName = "Robert", MName = "", LName = "", DOB = DateTime.Parse("06/28/1964"), Sex = 'M' });
    empList.Add(new Employee() { ID = 10, FName = "Krishna", MName = "Murali", LName = "Sunkam", DOB = DateTime.Parse("04/18/1969"), Sex = 'M' });
    empList.Add(new Employee() { ID = 11, FName = "Cindy", MName = "Preston", LName = "Fox", DOB = DateTime.Parse("06/15/1978"), Sex = 'M' });
    empList.Add(new Employee() { ID = 12, FName = "Nicole", MName = "G", LName = "Holiday", DOB = DateTime.Parse("08/21/1974"), Sex = 'F' });
    empList.Add(new Employee() { ID = 13, FName = "Sandra", MName = "T", LName = "Feng", DOB = DateTime.Parse("04/15/1976"), Sex = 'F' });
    empList.Add(new Employee() { ID = 14, FName = "Roberto", MName = "", LName = "Tamburello", DOB = DateTime.Parse("01/06/1982"), Sex = 'M' });
    empList.Add(new Employee() { ID = 15, FName = "Cynthia", MName = "O", LName = "Lugo", DOB = DateTime.Parse("01/21/1968"), Sex = 'M' });
    empList.Add(new Employee() { ID = 16, FName = "Yuhong", MName = "R", LName = "Li", DOB = DateTime.Parse("08/22/1979"), Sex = 'M' });
    empList.Add(new Employee() { ID = 17, FName = "Alex", MName = "", LName = "Shoop", DOB = DateTime.Parse("03/01/1972"), Sex = 'M' });
    empList.Add(new Employee() { ID = 18, FName = "Jack", MName = "K", LName = "Brown", DOB = DateTime.Parse("04/11/1978"), Sex = 'M' });
    empList.Add(new Employee() { ID = 19, FName = "Andrew", MName = "U", LName = "Gibson", DOB = DateTime.Parse("08/21/1977"), Sex = 'M' });
    empList.Add(new Employee() { ID = 20, FName = "George", MName = "K", LName = "Wood", DOB = DateTime.Parse("07/15/1972"), Sex = 'M' });
    empList.Add(new Employee() { ID = 21, FName = "Eugene", MName = "", LName = "Miller", DOB = DateTime.Parse("09/13/1974"), Sex = 'M' });
    empList.Add(new Employee() { ID = 22, FName = "Russell", MName = "", LName = "Gorgi", DOB = DateTime.Parse("08/19/1978"), Sex = 'M' });
    empList.Add(new Employee() { ID = 23, FName = "Katie", MName = "", LName = "Sylar", DOB = DateTime.Parse("08/21/1978"), Sex = 'M' });
    empList.Add(new Employee() { ID = 24, FName = "Michael", MName = "M", LName = "Bentler", DOB = DateTime.Parse("11/26/1977"), Sex = 'M' });
    empList.Add(new Employee() { ID = 25, FName = "Barbara", MName = "L", LName = "Duffy", DOB = DateTime.Parse("05/29/1972"), Sex = 'M' });
    empList.Add(new Employee() { ID = 26, FName = "Stefen", MName = "J", LName = "Northup", DOB = DateTime.Parse("01/26/1972"), Sex = 'M' });
    empList.Add(new Employee() { ID = 27, FName = "Shane", MName = "", LName = "Nay", DOB = DateTime.Parse("02/21/1978"), Sex = 'M' });
    empList.Add(new Employee() { ID = 28, FName = "Brenda", MName = "", LName = "Lugo", DOB = DateTime.Parse("08/18/1981"), Sex = 'F' });
    empList.Add(new Employee() { ID = 29, FName = "Shammi", MName = "I", LName = "Rai", DOB = DateTime.Parse("03/13/1968"), Sex = 'M' });
    empList.Add(new Employee() { ID = 30, FName = "Rajesh", MName = "H", LName = "Vyas", DOB = DateTime.Parse("04/19/1969"), Sex = 'M' });
    empList.Add(new Employee() { ID = 31, FName = "Gabe", MName = "P", LName = "Lloyd", DOB = DateTime.Parse("08/21/1971"), Sex = 'M' });
    return empList;
  }
}

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
Aug 13 Javascript
ext监听事件方法[初级篇]
Apr 27 Javascript
js cookies实现简单统计访问次数
Nov 24 Javascript
JS数组的赋值介绍
Mar 10 Javascript
js中把JSON字符串转换成JSON对象最好的方法
Mar 21 Javascript
AngularJS 打开新的标签页实现代码
Sep 07 Javascript
vue中接口域名配置为全局变量的实现方法
Sep 20 Javascript
vue实现表单录入小案例
Sep 27 Javascript
ES6如何用一句代码实现函数的柯里化
Jan 18 Javascript
js中addEventListener()与removeEventListener()用法案例分析
Mar 02 Javascript
vue element ui validate 主动触发错误提示操作
Sep 21 Javascript
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
jquery模拟多级复选框效果的简单实例
Jun 08 #Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
Jun 08 #Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
Jun 08 #Javascript
Js+Ajax,Get和Post在使用上的区别小结
Jun 08 #Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 #Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 #Javascript
浅谈JS原生Ajax,GET和POST
Jun 08 #Javascript
You might like
PHP判断是否有Get参数的方法
2014/05/05 PHP
php解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
ThinkPHP中的create方法与自动令牌验证实例教程
2014/08/22 PHP
php实现发送微信模板消息的方法
2015/03/07 PHP
深入解析WordPress中加载模板的get_template_part函数
2016/01/11 PHP
Laravel5.4框架中视图共享数据的方法详解
2019/09/05 PHP
使用JavaScript switch case 另类写法
2010/03/14 Javascript
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
2011/10/29 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
2012/02/27 Javascript
鼠标滚轮控制网页横向移动实现思路
2013/03/22 Javascript
用于deeplink的js方法(判断手机是否安装app)
2014/04/02 Javascript
node.js中的path.delimiter方法使用说明
2014/12/09 Javascript
javascript将数字转换整数金额大写的方法
2015/01/27 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
2016/05/03 Javascript
ajax分页效果(bootstrap模态框)
2017/01/23 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
微信小程序switch开关选择器使用详解
2018/01/31 Javascript
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
浅谈vuex中store的命名空间
2019/11/08 Javascript
Python的动态重新封装的教程
2015/04/11 Python
Python通过select实现异步IO的方法
2015/06/04 Python
Python AES加密模块用法分析
2017/05/22 Python
python如何使用unittest测试接口
2018/04/04 Python
Python wxPython库消息对话框MessageDialog用法示例
2018/09/03 Python
PyCharm永久激活方式(推荐)
2020/09/22 Python
解决TensorFlow调用Keras库函数存在的问题
2020/07/06 Python
基于python判断字符串括号是否闭合{}[]()
2020/09/21 Python
Django restful framework生成API文档过程详解
2020/11/12 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
交通事故私了协议书
2014/04/16 职场文书
《社戏》教学反思
2016/02/22 职场文书
2016年圣诞节义工活动总结
2016/04/01 职场文书
html网页引入svg图片的4种方式
2022/08/05 HTML / CSS