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 相关文章推荐
JS小功能(checkbox实现全选和全取消)实例代码
Nov 28 Javascript
解析Javascript中大括号“{}”的多义性
Dec 02 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
Jan 28 Javascript
javascript实现表单验证
Jan 29 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
Bootstrap select实现下拉框多选效果
Dec 23 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
微信小程序 slider的简单实例
Apr 19 Javascript
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
.vue文件 加scoped 样式不起作用的解决方法
May 28 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
Vue实现剪贴板复制功能
Dec 31 Javascript
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
收音机鉴频器对声音的影响和频偏分析
2021/03/02 无线电
探讨:parse url解析URL,返回其组成部分
2013/06/14 PHP
php判断字符串在另一个字符串位置的方法
2014/02/27 PHP
不同浏览器的怪癖小结
2010/07/11 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
jquery实现metro效果示例代码
2013/09/06 Javascript
告诉你什么是javascript的回调函数
2014/09/04 Javascript
node.js中的url.parse方法使用说明
2014/12/10 Javascript
JS实现图片垂直居中显示小结
2016/12/13 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
2017/09/06 Javascript
nodejs实现套接字服务功能详解
2018/06/21 NodeJs
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
Python实现网站文件的全备份和差异备份
2014/11/30 Python
Python打印scrapy蜘蛛抓取树结构的方法
2015/04/08 Python
Python实现选择排序
2017/06/04 Python
python实现机械分词之逆向最大匹配算法代码示例
2017/12/13 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
Python秒算24点实现及原理详解
2019/07/29 Python
Django之form组件自动校验数据实现
2020/01/14 Python
Python参数传递实现过程及原理详解
2020/05/14 Python
python中线程和进程有何区别
2020/06/17 Python
python支持多继承吗
2020/06/19 Python
使用HTML5的链接预取功能(link prefetching)给网站提速
2012/12/13 HTML / CSS
MONNIER Frères英国官网:源自巴黎女士奢侈品配饰电商平台
2018/12/06 全球购物
职高毕业生自我鉴定
2013/10/21 职场文书
电气工程和自动化自荐信范文
2013/12/25 职场文书
《颐和园》教学反思
2014/02/26 职场文书
火锅店营销方案
2014/02/26 职场文书
求职者怎样写自荐信
2014/04/13 职场文书
小学生竞选班长演讲稿
2014/04/24 职场文书
2016大学自主招生推荐信范文
2015/03/23 职场文书
Python字符串的转义字符
2022/04/07 Python
Python循环之while无限迭代
2022/04/30 Python
详解CSS3浏览器兼容
2022/12/24 HTML / CSS