实现类似Windows资源管理器的DataGrid
日期：2012-05-09 浏览次数：20423 次
在DataGrid中，我们可以实现类似Windows资源管理器的效果，即对列进行排序，该列颜色与其它列不同。下面就是实现的代码：
C#代码：
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>
<script language="javascript" type="text/javascript">
function showheadertip(idx)
{
var tooltip
if (document.getElementById)
tooltip = document.getElementById('htip' + idx)
else
tooltip = eval("document.all['htip" + idx + "']");
if (tooltip != null)
{
tooltip.style.pixelLeft = event.clientX + 5;
tooltip.style.pixelTop = event.clientY + 5;
tooltip.style.visibility = "visible";
}
}
function hideheadertip(idx)
{
var tooltip
if (document.getElementById)
tooltip = document.getElementById('htip' + idx)
else
tooltip = eval("document.all['htip" + idx + "']");
if (tooltip != null)
{
tooltip.style.visibility = "hidden";
}
}
</script>
</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>
C#代码：
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>
<script language="javascript" type="text/javascript">
function showheadertip(idx)
{
var tooltip
if (document.getElementById)
tooltip = document.getElementById('htip' + idx)
else
tooltip = eval("document.all['htip" + idx + "']");
if (tooltip != null)
{
tooltip.style.pixelLeft = event.clientX + 5;
tooltip.style.pixelTop = event.clientY + 5;
tooltip.style.visibility = "visible";
}
}
function hideheadertip(idx)
{
var tooltip
if (document.getElementById)
tooltip = document.getElementById('htip' + idx)
else
tooltip = eval("document.all['htip" + idx + "']");
if (tooltip != null)
{
tooltip.style.visibility = "hidden";
}
}
</script>
</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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
