效果图:
本文主要介绍双向排序功能和选择行背景颜色
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=''");
}
具体实现代码
前台
<! 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 >
后台
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