分享GridView 排序上下箭头的实现和鼠标移上行的变色及序号列上带小三角形

效果图：

本文主要介绍双向排序功能和选择行背景颜色

1、排序主要通过 gridview_sorting 自带的排序

 要实现加上小三角需在gridview_RowDataBound

            if (e.Row.RowType == DataControlRowType.Header)
            {
                foreach (DataControlField dataControlField in gridview.Columns)
                {
                    if (dataControlField.SortExpression.Equals(this.SortExpression))
                    {
                        Label label = new Label();
                        label.Text = this.SortDire.Equals("ASC") ? "▲" : "▼";
                        e.Row.Cells[gridview.Columns.IndexOf(dataControlField)].Controls.Add(label);
                    }
                }
            }

2、选择行背景色

    if (e.Row.RowType == DataControlRowType.DataRow)
            {
                //鼠标经过时，行背景色变
                e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='#E6F5FA';  document.getElementById('gridview_lblIndex_" + e.Row.RowIndex + "').innerHTML=\"<div id='trigon'  class = 'sanjiao'></div>\"");
                //鼠标移出时，行背景色变
                e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='#FFFFFF';document.getElementById('gridview_lblIndex_" + e.Row.RowIndex + "').innerHTML=''");
            }

具体实现代码

前台

 

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeBehind = " WebForm1.aspx.cs "  Inherits = " WebTest.WebForm1 "   %>

<! 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 >
        .GridViewStyle
         {
            font-size :  12px ;
            width :  100% ;
            border-right :  1px solid #CCCDD2 ;
            border-bottom :  1px solid #CCCDD2 ;
            border-left :  1px solid CCCDD2 ;
            border-top :  1 px solid CCCDD2 ;
            padding :  2px ;
         }
        .GridViewStyle a
         {
            color :  #000000 ;
          text-decoration : none ;

         }
        
        .GridViewHeaderStyle th
         {
            border-left :  1px solid #CCCDD2 ;
            border-right :  1px solid #CCCDD2 ;
            height :  19px ;
            
         }
        
        .GridViewHeaderStyle
         {
             /*  background-color: #F6F6F8; */
            background :  url(1.jpg) ;
         }
        
        .GridViewFooterStyle
         {
            background-color :  #5D7B9D ;
            font-weight :  bold ;
            color :  White ;
         }
        
        .GridViewRowStyle
         {
            height :  20px ;   /* background-color: #FFFFFF;  */
         }
        
        .GridViewAlternatingRowStyle
         {
            height :  20px ;   /* background-color: #F7F6F3;  */
         }
        
        .GridViewRowStyle td, .GridViewAlternatingRowStyle td
         {
            text-indent :  10px ;
            color :  "#F00" ;
            border :  1px solid #CCCDD2 ;
         }
        
        .GridViewSelectedRowStyle
         {
            background-color :  #E2DED6 ;
            font-weight :  bold ;
            color :  #333333 ;
         }
        
        .GridViewPagerStyle
         {
            background-color :  #284775 ;
            color :  #FFFFFF ;
         }
        
        .GridViewPagerStyle table  /**/   /*  to center the paging links */
         {
            margin :  0 auto 0 auto ;
         }
           .xuhao
         {
            background-color :  #EEF3F7 ;
         }
        .sanjiao
         {
            border-top :  4px solid #FFFFFF ;
            border-left :  4px solid #000000 ;
            border-bottom :  4px solid #FFFFFF ;
            float :  left ;
            margin-left :  4px ;
            margin-top :  4px ;
            background-color :  #EEF3F7 ;
         }
     </ style >
</ head >
< body >
     < form  id ="form1"  runat ="server" >
     < asp:GridView  ID ="gridview"  CssClass ="GridViewStyle"  runat ="server"  AutoGenerateColumns ="false"
        AllowSorting ="true"  OnSorting ="gridview_Sorting"  GridLines ="Both"  OnRowDataBound ="gridview_RowDataBound" >
         < Columns >
             < asp:TemplateField  HeaderText ="序号" >
                 < ItemTemplate >
                     < label  id ="lblIndex"  runat ="server" >
                     </ label >
                     <% # this.gridview.PageIndex  *  this.gridview.PageSize  +  Container.DataItemIndex  +   1 %>
                 </ ItemTemplate >
                 < ItemStyle  Width ="50px"  BackColor ="#F5F5F7"   />
                 < HeaderStyle  Width ="50px"  Font-Bold ="false"   />
             </ asp:TemplateField >
             < asp:BoundField  HeaderText ="用户名"  DataField ="UserName"   SortExpression ="UserName" >
                 < HeaderStyle  Font-Bold ="false"   />
             </ asp:BoundField >
             < asp:BoundField  HeaderText ="姓名"  DataField ="Realname"  SortExpression ="Realname" >
                 < HeaderStyle  Font-Bold ="false"   />
             </ asp:BoundField >
             < asp:BoundField  HeaderText ="公司"  DataField ="CompanyName"  SortExpression ="CompanyName" >
                 < HeaderStyle  Font-Bold ="false"   />
             </ asp:BoundField >
             < asp:BoundField  HeaderText ="部门"  DataField ="DepartmentName"  SortExpression ="DepartmentName" >
                 < HeaderStyle  Font-Bold ="false"   />
             </ asp:BoundField >
         </ Columns >
         < EmptyDataTemplate >
         </ EmptyDataTemplate >
         < FooterStyle  CssClass ="GridViewFooterStyle"   />
         < RowStyle  CssClass ="GridViewRowStyle"   />
         < SelectedRowStyle  CssClass ="GridViewSelectedRowStyle"   />
         < PagerStyle  CssClass ="GridViewPagerStyle"   />
         < AlternatingRowStyle  CssClass ="GridViewAlternatingRowStyle"   />
         < HeaderStyle  CssClass ="GridViewHeaderStyle"   />
     </ asp:GridView >
     </ form >
</ body >
</ html >

后台

View Code

using  System;
using  System.Data;
using  System.Data.SqlClient;
using  System.Collections.Generic;
using  System.Linq;
using  System.Web;
using  System.Web.UI;
using  System.Web.UI.WebControls;

namespace  WebTest
{
     public   partial   class  WebForm1 : System.Web.UI.Page
    {
         public  DataTable DT
        {
             get  {  return  Session[ " DT " ]  as  DataTable; }
             set  { Session[ " DT " ]  =  value; }
        }
         protected   void  Page_Load( object  sender, EventArgs e)
        {
             if  ( ! this .IsPostBack)
            {
                SqlConnection sqlConnection  =   new  SqlConnection( " Data Source=localhost;Initial Catalog=UserCenterV36;User Id = sa ; Password = sa; " );
                sqlConnection.Open();
                SqlDataAdapter sqlDataAdapter  =   new  SqlDataAdapter( " SELECT top 20 * FROM Base_User " , sqlConnection);
                DT  =   new  DataTable();
                sqlDataAdapter.Fill(DT);
                sqlConnection.Close();
            }


             this .gridview.DataSource  =  DT;
             this .gridview.DataBind();
        }
         //
         //  排序功能部分
         //

         public   string  SortExpression
        {
             get
            {
                 if  (ViewState[ " sortExpression " ]  ==   null )
                {
                    ViewState[ " sortExpression " ]  =   " SortCode " ;
                }
                 return  ViewState[ " sortExpression " ].ToString();
            }
             set
            {
                ViewState[ " sortExpression " ]  =  value;
            }
        }

         public   string  SortDire
        {
             get
            {
                 if  (ViewState[ " sortDire " ]  ==   null )
                {
                    ViewState[ " sortDire " ]  =   "  DESC  " ;
                }
                 return  ViewState[ " sortDire " ].ToString();
            }
             set
            {
                ViewState[ " sortDire " ]  =  value;
            }
        }

         protected   void  gridview_Sorting( object  sender, GridViewSortEventArgs e)
        {
             if  ( this .SortDire  ==   " ASC " )
            {
                 this .SortDire  =   " DESC " ;
            }
             else
            {
                 this .SortDire  =   " ASC " ;
            }
             this .SortExpression  =  e.SortExpression;
             this .DT.DefaultView.Sort  =   this .SortExpression  +   "   "   +   this .SortDire;
             this .gridview.EditIndex  =   - 1 ;
             this .gridview.DataSource  =   this .DT;
             this .gridview.DataBind();
        }

         protected   void  gridview_RowDataBound( object  sender, GridViewRowEventArgs e)
        {           
             if  (e.Row.RowType  ==  DataControlRowType.DataRow)
            {
                 // 鼠标经过时，行背景色变 
                e.Row.Attributes.Add( " onmouseover " ,  " this.style.backgroundColor='#E6F5FA';  document.getElementById('gridview_lblIndex_ "   +  e.Row.RowIndex  +   " ').innerHTML=\"<div id='trigon'  class = 'sanjiao'></div>\" " );
                 // 鼠标移出时，行背景色变 
                e.Row.Attributes.Add( " onmouseout " ,  " this.style.backgroundColor='#FFFFFF';document.getElementById('gridview_lblIndex_ "   +  e.Row.RowIndex  +   " ').innerHTML='' " );
            }

             if  (e.Row.RowType  ==  DataControlRowType.Header)
            {
                 foreach  (DataControlField dataControlField  in  gridview.Columns)
                {
                     if  (dataControlField.SortExpression.Equals( this .SortExpression))
                    {
                        Label label  =   new  Label();
                        label.Text  =   this .SortDire.Equals( " ASC " )  ?   " ▲ "  :  " ▼ " ;
                        e.Row.Cells[gridview.Columns.IndexOf(dataControlField)].Controls.Add(label);
                    }
                }
            }
        }
    }
}

 

源代码下载

/Files/lmm1508561/源码下载/WebTest.rar

 

转载于:https://www.cnblogs.com/lmm1508561/archive/2011/09/03/2165272.html