结合客户端脚本，我们可以创建出可以拖动列，可以拖动改变列宽度，显示、隐藏列、编辑列的XP风格的 DataGrid，下面就是所有的代码。自己调试时请注意修改eMeng.Exam.UltraGrid路径。
查看例子
全部下载
UltraGrid.aspx
<![CDATA[
<%@ Page Language="c#" EnableViewState="false" AutoEventWireup="true" ResponseEncoding="GB2312" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.OleDb" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<script runat="server">
void Page_Load( object sender, System.EventArgs e )
{
coolUltraGrid1.Attributes.Add("class", "coolUltraGrid");
coolUltraGrid1.Attributes.Add("style", "WIDTH: 100%; HEIGHT: 400");
coolUltraGrid1.Attributes.Add("borderStyle", "2");
coolUltraGrid1.Attributes.Add("altRowColor", "oldLace");
coolUltraGrid1.Attributes.Add("selectionStyle", "1");
OleDbConnection cn = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + HttpContext.Current.Server.MapPath("Web.mdb"));
cn.Open();
OleDbCommand cmd = new OleDbCommand("SELECT id, Title As 文档标题,CreateDate as 发布时间,Author AS 作者 FROM Document ORDER BY id DESC", cn);
OleDbDataReader dr;
dr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
///
///组合表头
///
int FieldNumber = dr.FieldCount;
int ColWidth, Tmp = 0;
if (FieldNumber == 0)
Response.End();
ColWidth = (int)100 / FieldNumber;
string TableHeader = "";
for (int i = 0; i < FieldNumber; i++)
{
if (dr.Read())
{
if (i == FieldNumber - 1)
TableHeader += "<span width='" + (100 - Tmp).ToString() + "%'>" + dr.GetName(i).ToString() + "</span>";
else
TableHeader += "<span width='" + ColWidth.ToString() + "%'>" + dr.GetName(i).ToString() + "</span>";
Tmp += ColWidth;
}
}
gridRow.InnerHtml = TableHeader;
int RowNumber = 1;
TableHeader = "<div class='gridBody'>";
while (dr.Read())
{
TableHeader += "<div class='gridRow' id='row" + RowNumber.ToString() + "'>";
for (int i = 0; i < FieldNumber; i++)
{
TableHeader += "<span>" + dr.GetValue(i).ToString() + "</span>";
}
TableHeader += "</div>";
RowNumber++;
}
TableHeader += "</div>";
RowItem.Text = TableHeader;
cn.Close();
}
</script>
<html>
<head>
<title>例子</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="UltraGrid.css">
</head>
<body>
<table height="575" cellspacing="0" cellpadding="0" width="81" border="0">
<tr valign="top">
<td width="81" height="575">
<form id="DragableXpStyleTable" method="post" runat="server">
<table height="64" cellspacing="0" cellpadding="0" width="563" border="0">
<tr valign="top">
<td width="10" height="15">
</td>
<td width="553">
</td>
</tr>
<tr valign="top">
<td height="29">
</td>
<td>
<div align="center">
<b> XP 风格的可拖动列、可排序、可改变宽度的DataGrid的例子。</b></div>
</td>
</tr>
<tr valign="top">
<td height="20">
</td>
<td>
<div id="coolUltraGrid1" runat="server">
<div class="gridHead">
<div class="gridRow" id="gridRow" runat="server">
</div>
</div>
<asp:Literal ID="RowItem" runat="server"></asp:Literal>
</div>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>
]]>
注意：本例子不适合下面的文档类型定义：
<![CDATA[
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
]]>
.NET 相关
