XP 风格的可拖动列、可排序、可改变宽度的DataGrid的例子_LINQ | ASP.NET 3.5 | SilverLight2 | MVC

XP 风格的可拖动列、可排序、可改变宽度的DataGrid的例子

作者：孟宪会发布日期：2004-02-16 20:58:34

结合客户端脚本，我们可以创建出可以拖动列，可以拖动改变列宽度，显示、隐藏列、编辑列的XP风格的 DataGrid，下面就是所有的代码。自己调试时请注意修改eMeng.Exam.UltraGrid路径。

UltraGrid.aspx

<%@ 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>

注意：本例子不适合下面的文档类型定义：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

原文地址：http://dotnet.aspx.cc/article/00c78024-5c08-4f3f-bca8-ab3c0b330a12/print.aspx