在DataGrid中,我们可以实现类似Windows资源管理器的效果,即对列进行排序,该列颜色与其它列不同。下面就是实现的代码:
DataGridLikeWindowsExplorer.aspx
<%
@ Page language
=
"
c#
"
Codebehind
=
"
DataGridLikeWindowsExplorer.aspx.cs
"
AutoEventWireup = " false " Inherits = " aspxWebCS.DataGridLikeWindowsExplorer " %>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< HTML >
< HEAD >
< title > DataGridLikeWindowsExplorer </ title >
< meta name ="GENERATOR" Content ="Microsoft Visual Studio 7.0" >
< meta name ="CODE_LANGUAGE" Content ="C#" >
< meta name ="vs_defaultClientScript" content ="JavaScript" >
< meta name ="vs_targetSchema" content ="http://schemas.microsoft.com/intellisense/ie5" >
< style type ="text/css" >
.gridtooltip {
BORDER-RIGHT : black 1px solid ;
PADDING-RIGHT : 4px ;
BORDER-TOP : black 1px solid ;
PADDING-LEFT : 4px ;
Z-INDEX : 200 ;
LEFT : 0px ;
VISIBILITY : hidden ;
PADDING-BOTTOM : 4px ;
FONT : 9pt bold 宋体 ;
BORDER-LEFT : black 1px solid ;
WIDTH : 150px ;
COLOR : white ;
PADDING-TOP : 4px ;
BORDER-BOTTOM : black 1px solid ;
POSITION : absolute ;
TOP : 0px ;
BACKGROUND-COLOR : #ff3316
}
</ style >
<!-- {PS..1} -->
</ HEAD >
< body MS_POSITIONING ="GridLayout" >
< asp:PlaceHolder ID ="Tips_PlaceHolder" Runat ="server" ></ asp:PlaceHolder >
< form id ="DataGridLikeWindowsExplorer" method ="post" runat ="server" >
< div align ="center" >
< h4 > Northwind职员表 </ h4 >
< asp:DataGrid ID ="WinExplorerView_DataGrid" Runat ="server" BorderColor ="#FF6600"
BorderStyle ="None" BorderWidth ="5px" BackColor ="White" CellPadding ="5" AllowSorting ="True"
AutoGenerateColumns ="False" AllowPaging ="True" GridLines ="Horizontal" PageSize ="5" >
< SelectedItemStyle Font-Bold ="True" ForeColor ="White" BackColor ="#669999" ></ SelectedItemStyle >
< ItemStyle ForeColor ="#000066" ></ ItemStyle >
< HeaderStyle Font-Bold ="True" HorizontalAlign ="Center" ForeColor ="Navy" BackColor ="#FFCC00" ></ HeaderStyle >
< FooterStyle ForeColor ="#000066" BackColor ="White" ></ FooterStyle >
< Columns >
< asp:BoundColumn DataField ="LastName" SortExpression ="LastName" HeaderText ="姓" ></ asp:BoundColumn >
< asp:BoundColumn DataField ="FirstName" SortExpression ="FirstName" HeaderText ="名字" ></ asp:BoundColumn >
< asp:BoundColumn DataField ="Title" SortExpression ="Title" HeaderText ="职位" ></ asp:BoundColumn >
< asp:BoundColumn DataField ="BirthDate" SortExpression ="BirthDate" HeaderText ="出生日期"
DataFormatString ="{0:d}" /></ asp:BoundColumn >
< asp:BoundColumn DataField ="City" SortExpression ="City" HeaderText ="居住地" ></ asp:BoundColumn >
</ Columns >
< PagerStyle HorizontalAlign ="Left" ForeColor ="#000066" BackColor ="White" Mode ="NumericPages" ></ PagerStyle >
</ asp:DataGrid >
</ div >
</ form >
</ body >
</ HTML >
AutoEventWireup = " false " Inherits = " aspxWebCS.DataGridLikeWindowsExplorer " %>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< HTML >
< HEAD >
< title > DataGridLikeWindowsExplorer </ title >
< meta name ="GENERATOR" Content ="Microsoft Visual Studio 7.0" >
< meta name ="CODE_LANGUAGE" Content ="C#" >
< meta name ="vs_defaultClientScript" content ="JavaScript" >
< meta name ="vs_targetSchema" content ="http://schemas.microsoft.com/intellisense/ie5" >
< style type ="text/css" >
.gridtooltip {
BORDER-RIGHT : black 1px solid ;
PADDING-RIGHT : 4px ;
BORDER-TOP : black 1px solid ;
PADDING-LEFT : 4px ;
Z-INDEX : 200 ;
LEFT : 0px ;
VISIBILITY : hidden ;
PADDING-BOTTOM : 4px ;
FONT : 9pt bold 宋体 ;
BORDER-LEFT : black 1px solid ;
WIDTH : 150px ;
COLOR : white ;
PADDING-TOP : 4px ;
BORDER-BOTTOM : black 1px solid ;
POSITION : absolute ;
TOP : 0px ;
BACKGROUND-COLOR : #ff3316
}
</ style >
<!-- {PS..1} -->
</ HEAD >
< body MS_POSITIONING ="GridLayout" >
< asp:PlaceHolder ID ="Tips_PlaceHolder" Runat ="server" ></ asp:PlaceHolder >
< form id ="DataGridLikeWindowsExplorer" method ="post" runat ="server" >
< div align ="center" >
< h4 > Northwind职员表 </ h4 >
< asp:DataGrid ID ="WinExplorerView_DataGrid" Runat ="server" BorderColor ="#FF6600"
BorderStyle ="None" BorderWidth ="5px" BackColor ="White" CellPadding ="5" AllowSorting ="True"
AutoGenerateColumns ="False" AllowPaging ="True" GridLines ="Horizontal" PageSize ="5" >
< SelectedItemStyle Font-Bold ="True" ForeColor ="White" BackColor ="#669999" ></ SelectedItemStyle >
< ItemStyle ForeColor ="#000066" ></ ItemStyle >
< HeaderStyle Font-Bold ="True" HorizontalAlign ="Center" ForeColor ="Navy" BackColor ="#FFCC00" ></ HeaderStyle >
< FooterStyle ForeColor ="#000066" BackColor ="White" ></ FooterStyle >
< Columns >
< asp:BoundColumn DataField ="LastName" SortExpression ="LastName" HeaderText ="姓" ></ asp:BoundColumn >
< asp:BoundColumn DataField ="FirstName" SortExpression ="FirstName" HeaderText ="名字" ></ asp:BoundColumn >
< asp:BoundColumn DataField ="Title" SortExpression ="Title" HeaderText ="职位" ></ asp:BoundColumn >
< asp:BoundColumn DataField ="BirthDate" SortExpression ="BirthDate" HeaderText ="出生日期"
DataFormatString ="{0:d}" /></ asp:BoundColumn >
< asp:BoundColumn DataField ="City" SortExpression ="City" HeaderText ="居住地" ></ asp:BoundColumn >
</ Columns >
< PagerStyle HorizontalAlign ="Left" ForeColor ="#000066" BackColor ="White" Mode ="NumericPages" ></ PagerStyle >
</ asp:DataGrid >
</ div >
</ form >
</ body >
</ HTML >
C#(DataGridLikeWindowsExplorer.aspx.cs):
using
System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Data.SqlClient;
using System.Drawing;
using System.Web;
using System.Web.Caching;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace aspxWebCS
{
/// <summary>
/// DataGridLikeWindowsExplorer 的摘要说明。
/// </summary>
public class DataGridLikeWindowsExplorer : System.Web.UI.Page
{
protected System.Web.UI.WebControls.DataGrid WinExplorerView_DataGrid;
protected System.Data.SqlClient.SqlDataAdapter m_sqlDataAdapter;
protected System.Data.SqlClient.SqlCommand m_sqlSelectCommand;
protected System.Data.SqlClient.SqlConnection m_sqlConnection;
protected System.Data.DataSet m_dsEmployees;
protected System.Data.DataView m_dvEmployees;
protected System.Collections.Hashtable colHeaderMap;
protected string m_strSortExpr;
protected string m_strSortOrder;
protected int m_iSortColumnIdx;
protected System.Web.UI.WebControls.PlaceHolder Tips_PlaceHolder;
protected string strConn = " Data Source=.;User Id=sa;Password=;Initial Catalog=Northwind; " ;
private void Page_Load( object sender, System.EventArgs e)
{
m_iSortColumnIdx = - 1 ;
m_strSortExpr = "" ;
m_strSortOrder = "" ;
ProcessViewState();
PrepareColumnHeaderMap();
if ( ! IsPostBack)
{
BindGridToView();
}
}
private void PrepareColumnHeaderMap()
{
colHeaderMap = new Hashtable();
int idx = 0 ;
foreach (DataGridColumn col in WinExplorerView_DataGrid.Columns)
{
colHeaderMap[col.SortExpression] = idx ++ ;
}
}
private void RetrieveData()
{
if ( null == Cache[ " EmployeesDS " ])
{
string tmp = " SELECT LastName, FirstName, Title, BirthDate, City FROM Employees " ;
m_sqlConnection = new SqlConnection(strConn);
m_sqlSelectCommand = new SqlCommand(tmp, m_sqlConnection);
m_sqlDataAdapter = new SqlDataAdapter(m_sqlSelectCommand);
m_dsEmployees = new DataSet( " Employees " );
m_sqlDataAdapter.Fill(m_dsEmployees);
Cache.Insert( " EmployeesDS " , m_dsEmployees, null , DateTime.Now.AddMinutes( 1 ), Cache.NoSlidingExpiration);
}
else
{
m_dsEmployees = (DataSet)Cache[ " EmployeesDS " ];
}
}
private void ProcessViewState()
{
if ( null != ViewState[ " SortExpr " ])
{
m_strSortExpr = ViewState[ " SortExpr " ].ToString();
}
if ( null != ViewState[ " SortOrder " ])
{
m_strSortOrder = ViewState[ " SortOrder " ].ToString();
}
}
private void BindGridToView()
{
string strSort = "" ;
if ( 0 != m_strSortExpr.Length)
{
strSort = m_strSortExpr;
if ( 0 != m_strSortOrder.Length)
{
strSort += ( " " + m_strSortOrder);
}
}
RetrieveData();
m_dvEmployees = new DataView(m_dsEmployees.Tables[ 0 ], "" , strSort, DataViewRowState.CurrentRows);
WinExplorerView_DataGrid.DataSource = m_dvEmployees;
WinExplorerView_DataGrid.DataBind();
}
private Color GetSortColumnColor()
{
if ( null == this .m_strSortOrder ||
String.Empty == this .m_strSortOrder ||
0 == this .m_strSortOrder.Length)
{
return Color.Gold;
}
if (m_strSortOrder.CompareTo( " ASC " ) == 0 )
{
return Color.Gold;
}
else
{
return Color.BlanchedAlmond;
}
}
private void OnPageIndexChange( object source, System.Web.UI.WebControls.DataGridPageChangedEventArgs e)
{
WinExplorerView_DataGrid.CurrentPageIndex = e.NewPageIndex;
BindGridToView();
}
private void OnSortView( object source, System.Web.UI.WebControls.DataGridSortCommandEventArgs e)
{
m_strSortExpr = e.SortExpression;
ViewState[ " SortExpr " ] = m_strSortExpr;
if ( 0 == m_strSortOrder.Length)
{
m_strSortOrder = " ASC " ;
}
else if (m_strSortOrder.CompareTo( " ASC " ) == 0 )
{
m_strSortOrder = " DESC " ;
}
else
{
m_strSortOrder = " ASC " ;
}
ViewState[ " SortOrder " ] = m_strSortOrder;
// 找到Click事件所在的列序号
m_iSortColumnIdx = Convert.ToInt32( this .colHeaderMap[m_strSortExpr]);
BindGridToView();
}
private void OnItemCreated( object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Header)
{
int idx = 0 ;
foreach (TableCell cl in e.Item.Cells)
{
cl.Attributes.Add( " onmouseover " , " showheadertip( " + idx.ToString() + " ); " );
cl.Attributes.Add( " onmouseout " , " hideheadertip( " + idx.ToString() + " ); " );
idx ++ ;
}
}
if (e.Item.ItemType == ListItemType.Item ||
e.Item.ItemType == ListItemType.AlternatingItem)
{
if ( - 1 != m_iSortColumnIdx)
{
e.Item.Cells[m_iSortColumnIdx].BackColor = GetSortColumnColor();
}
}
}
protected override void OnPreRender(EventArgs e)
{
/// ToolTip文字
int nCount = this .WinExplorerView_DataGrid.Columns.Count;
for ( int i = 0 ; i < nCount; i ++ )
{
Panel pnl = new Panel();
pnl.CssClass = " gridtooltip " ;
pnl.ID = " htip " + i.ToString();
Literal lt = new Literal();
lt.Text = this .GetHeaderTooltipText(i);
pnl.Controls.Add(lt);
this .Tips_PlaceHolder.Controls.Add(pnl);
}
base .OnPreRender (e);
}
private string GetHeaderTooltipText( int iColIdx)
{
switch (iColIdx)
{
case 0 :
return " 职员的姓 " ;
case 1 :
return " 职员名字 " ;
case 2 :
return " 职员的职位 " ;
case 3 :
return " 出生日期 " ;
case 4 :
return " 居住地 " ;
default :
throw new ArgumentException( " 无效地列序号 " , " Index " );
}
}
#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
InitializeComponent();
base .OnInit(e);
}
private void InitializeComponent()
{
this .WinExplorerView_DataGrid.ItemCreated +=
new System.Web.UI.WebControls.DataGridItemEventHandler( this .OnItemCreated);
this .WinExplorerView_DataGrid.PageIndexChanged +=
new System.Web.UI.WebControls.DataGridPageChangedEventHandler( this .OnPageIndexChange);
this .WinExplorerView_DataGrid.SortCommand +=
new System.Web.UI.WebControls.DataGridSortCommandEventHandler( this .OnSortView);
this .Load += new System.EventHandler( this .Page_Load);
}
#endregion
}
}
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Data.SqlClient;
using System.Drawing;
using System.Web;
using System.Web.Caching;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace aspxWebCS
{
/// <summary>
/// DataGridLikeWindowsExplorer 的摘要说明。
/// </summary>
public class DataGridLikeWindowsExplorer : System.Web.UI.Page
{
protected System.Web.UI.WebControls.DataGrid WinExplorerView_DataGrid;
protected System.Data.SqlClient.SqlDataAdapter m_sqlDataAdapter;
protected System.Data.SqlClient.SqlCommand m_sqlSelectCommand;
protected System.Data.SqlClient.SqlConnection m_sqlConnection;
protected System.Data.DataSet m_dsEmployees;
protected System.Data.DataView m_dvEmployees;
protected System.Collections.Hashtable colHeaderMap;
protected string m_strSortExpr;
protected string m_strSortOrder;
protected int m_iSortColumnIdx;
protected System.Web.UI.WebControls.PlaceHolder Tips_PlaceHolder;
protected string strConn = " Data Source=.;User Id=sa;Password=;Initial Catalog=Northwind; " ;
private void Page_Load( object sender, System.EventArgs e)
{
m_iSortColumnIdx = - 1 ;
m_strSortExpr = "" ;
m_strSortOrder = "" ;
ProcessViewState();
PrepareColumnHeaderMap();
if ( ! IsPostBack)
{
BindGridToView();
}
}
private void PrepareColumnHeaderMap()
{
colHeaderMap = new Hashtable();
int idx = 0 ;
foreach (DataGridColumn col in WinExplorerView_DataGrid.Columns)
{
colHeaderMap[col.SortExpression] = idx ++ ;
}
}
private void RetrieveData()
{
if ( null == Cache[ " EmployeesDS " ])
{
string tmp = " SELECT LastName, FirstName, Title, BirthDate, City FROM Employees " ;
m_sqlConnection = new SqlConnection(strConn);
m_sqlSelectCommand = new SqlCommand(tmp, m_sqlConnection);
m_sqlDataAdapter = new SqlDataAdapter(m_sqlSelectCommand);
m_dsEmployees = new DataSet( " Employees " );
m_sqlDataAdapter.Fill(m_dsEmployees);
Cache.Insert( " EmployeesDS " , m_dsEmployees, null , DateTime.Now.AddMinutes( 1 ), Cache.NoSlidingExpiration);
}
else
{
m_dsEmployees = (DataSet)Cache[ " EmployeesDS " ];
}
}
private void ProcessViewState()
{
if ( null != ViewState[ " SortExpr " ])
{
m_strSortExpr = ViewState[ " SortExpr " ].ToString();
}
if ( null != ViewState[ " SortOrder " ])
{
m_strSortOrder = ViewState[ " SortOrder " ].ToString();
}
}
private void BindGridToView()
{
string strSort = "" ;
if ( 0 != m_strSortExpr.Length)
{
strSort = m_strSortExpr;
if ( 0 != m_strSortOrder.Length)
{
strSort += ( " " + m_strSortOrder);
}
}
RetrieveData();
m_dvEmployees = new DataView(m_dsEmployees.Tables[ 0 ], "" , strSort, DataViewRowState.CurrentRows);
WinExplorerView_DataGrid.DataSource = m_dvEmployees;
WinExplorerView_DataGrid.DataBind();
}
private Color GetSortColumnColor()
{
if ( null == this .m_strSortOrder ||
String.Empty == this .m_strSortOrder ||
0 == this .m_strSortOrder.Length)
{
return Color.Gold;
}
if (m_strSortOrder.CompareTo( " ASC " ) == 0 )
{
return Color.Gold;
}
else
{
return Color.BlanchedAlmond;
}
}
private void OnPageIndexChange( object source, System.Web.UI.WebControls.DataGridPageChangedEventArgs e)
{
WinExplorerView_DataGrid.CurrentPageIndex = e.NewPageIndex;
BindGridToView();
}
private void OnSortView( object source, System.Web.UI.WebControls.DataGridSortCommandEventArgs e)
{
m_strSortExpr = e.SortExpression;
ViewState[ " SortExpr " ] = m_strSortExpr;
if ( 0 == m_strSortOrder.Length)
{
m_strSortOrder = " ASC " ;
}
else if (m_strSortOrder.CompareTo( " ASC " ) == 0 )
{
m_strSortOrder = " DESC " ;
}
else
{
m_strSortOrder = " ASC " ;
}
ViewState[ " SortOrder " ] = m_strSortOrder;
// 找到Click事件所在的列序号
m_iSortColumnIdx = Convert.ToInt32( this .colHeaderMap[m_strSortExpr]);
BindGridToView();
}
private void OnItemCreated( object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Header)
{
int idx = 0 ;
foreach (TableCell cl in e.Item.Cells)
{
cl.Attributes.Add( " onmouseover " , " showheadertip( " + idx.ToString() + " ); " );
cl.Attributes.Add( " onmouseout " , " hideheadertip( " + idx.ToString() + " ); " );
idx ++ ;
}
}
if (e.Item.ItemType == ListItemType.Item ||
e.Item.ItemType == ListItemType.AlternatingItem)
{
if ( - 1 != m_iSortColumnIdx)
{
e.Item.Cells[m_iSortColumnIdx].BackColor = GetSortColumnColor();
}
}
}
protected override void OnPreRender(EventArgs e)
{
/// ToolTip文字
int nCount = this .WinExplorerView_DataGrid.Columns.Count;
for ( int i = 0 ; i < nCount; i ++ )
{
Panel pnl = new Panel();
pnl.CssClass = " gridtooltip " ;
pnl.ID = " htip " + i.ToString();
Literal lt = new Literal();
lt.Text = this .GetHeaderTooltipText(i);
pnl.Controls.Add(lt);
this .Tips_PlaceHolder.Controls.Add(pnl);
}
base .OnPreRender (e);
}
private string GetHeaderTooltipText( int iColIdx)
{
switch (iColIdx)
{
case 0 :
return " 职员的姓 " ;
case 1 :
return " 职员名字 " ;
case 2 :
return " 职员的职位 " ;
case 3 :
return " 出生日期 " ;
case 4 :
return " 居住地 " ;
default :
throw new ArgumentException( " 无效地列序号 " , " Index " );
}
}
#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
InitializeComponent();
base .OnInit(e);
}
private void InitializeComponent()
{
this .WinExplorerView_DataGrid.ItemCreated +=
new System.Web.UI.WebControls.DataGridItemEventHandler( this .OnItemCreated);
this .WinExplorerView_DataGrid.PageIndexChanged +=
new System.Web.UI.WebControls.DataGridPageChangedEventHandler( this .OnPageIndexChange);
this .WinExplorerView_DataGrid.SortCommand +=
new System.Web.UI.WebControls.DataGridSortCommandEventHandler( this .OnSortView);
this .Load += new System.EventHandler( this .Page_Load);
}
#endregion
}
}