利用jQuery实现Gridview 选中行相关数据显示

前台页面代码：

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeBehind = " ShowGridviewContent.aspx.cs "  Inherits = " jQueryApplication.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 runat = " server " >
     < title ></ title >
     < style type = " text/css " >
        .hightlite
        {
            background - color:Gray;
        }
     </ style >
     < script type = " text/javascript "  src = " http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js " ></ script >
     < script type = " text/javascript " >
        $(function() {
            $( " .gv > tbody > tr:not(:has(table, th)) " )
            .css( " cursor " ,  " pointer " )
            .click(function(e) {
            $( " .gv td " ).removeClass( " hightlite " );
                var $cell  =  $(e.target).closest( " td " );
                $cell.addClass( ' hightlite ' );
                var $currentCellText  =  $cell.text();
                var $leftCellText  =  $cell.prev().text();
                var $rightCellText  =  $cell.next().text();
                var $colIndex  =  $cell.parent().children().index($cell);
                var $colName  =  $cell.closest( " table " )
                    .find( ' th:eq( '   +  $colIndex  +   ' ) ' ).text();
                $( ' #para ' ).empty()
                .append( " 当前单元格: "   +  $currentCellText  +   " <br/> " )
                .append( " 左单元格: "   +  $leftCellText  +   " <br/> " )
                .append( " 右单元格: "   +  $rightCellText  +   " <br/> " )
                .append( " 列名称: "   +  $colName)
            });
        });
     </ script >
</ head >
< body >
     < form id = " form1 "  runat = " server " >
     < div >
     < asp:GridView ID = " grdEmployees "  runat = " server "  AllowPaging = " true "  PageSize = " 5 "
     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 >
     < p id = " para " ></ p >

     </ div >
     </ form >
</ body >
</ html >

 

 写一个Employee.cs类，数据源.

 代码

using  System;
using  System.Collections.Generic;
using  System.Linq;
using  System.Web;


     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;

        }
    }

 

 

转载于:https://www.cnblogs.com/chenqingwei/archive/2010/03/22/1691461.html