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

 

http://dotnet.aspx.cc/Exam/UltraGrid/UltraGrid.aspx

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

查看例子 

UltraGrid.aspx 

<% @ Page language = " c# "  Codebehind = " UltraGrid.aspx.cs "  AutoEventWireup = " false "  
Inherits = " eMeng.Exam.UltraGrid.UltraGrid "   %>  
<! DOCTYPE HTML PUBLIC  " -//W3C//DTD HTML 4.0 Transitional//EN "   >  
< HTML >  
< HEAD >  
< title > XP 风格的可拖动列、可排序、可改变宽度的DataGrid的例子 </ title >  
< META http - equiv = " content-type "  content = " text/html; charset=gb2312 " >  
< meta name = " GENERATOR "  Content = " Microsoft Visual Studio 7.0 " >  
< meta name = " CODE_LANGUAGE "  Content = " C# " >  
< link rel = " stylesheet "  type = " text/css "  href = " UltraGrid.css " >  
< meta name = " vs_defaultClientScript "  content = " JavaScript " >  
< meta name = " vs_targetSchema "  content = " http://schemas.microsoft.com/intellisense/ie5 " >  
</ HEAD >  
< body MS_POSITIONING = " GridLayout " >  
< form id = " DragableXpStyleTable "  method = " post "  runat = " server " >  
< div align = " center "  style = " PADDING:5px " >  
< b >& nbsp;XP 风格的可拖动列、可排序、可改变宽度的DataGrid的例子。 </ b >  
</ div >  
< 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 >  
</ form >  
</ body >  
</ HTML >  

UltraGrid.aspx.cs 

using  System; 
using  System.Collections; 
using  System.ComponentModel; 
using  System.Data; 
using  System.Data.OleDb; 
using  System.Drawing; 
using  System.Web; 
using  System.Web.SessionState; 
using  System.Web.UI; 
using  System.Web.UI.WebControls; 
using  System.Web.UI.HtmlControls; 

namespace  eMeng.Exam.UltraGrid 
... { 
/**//// <summary> 
/// UltraGrid 的摘要说明。本例子演示了如何创建可排序、可拖放、可调整宽度的XP风格的DataGrid。 
/// 出自：【孟宪会之精彩世界】 
/// </summary> 
public class UltraGrid : System.Web.UI.Page 
...{ 
protected System.Web.UI.HtmlControls.HtmlGenericControl gridRow; 
protected System.Web.UI.WebControls.Literal RowItem; 
protected System.Web.UI.HtmlControls.HtmlGenericControl coolUltraGrid1; 
private 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=c:/xxx.mdb"); 
cn.Open(); 
string sqlstring = "SELECT TOP 30 D.Title As 文档标题,D.CreateDate as 发布时间,S.Title AS 所属栏目 "; 
sqlstring += "FROM Document D,Subject S WHERE D.pid=S.id ORDER BY D.CreateDate DESC"; 
OleDbCommand cmd = new OleDbCommand(sqlstring,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(); 
} 
Web Form Designer generated code#region Web Form Designer generated code 
override protected void OnInit(EventArgs e) 
...{ 
// 
// CODEGEN：该调用是 ASP.NET Web 窗体设计器所必需的。 
// 
InitializeComponent(); 
base.OnInit(e); 
} 

/**//// <summary> 
/// 设计器支持所需的方法 - 不要使用代码编辑器修改 
/// 此方法的内容。 
/// </summary> 
private void InitializeComponent() 
...{ 
this.Load += new System.EventHandler(this.Page_Load); 

} 
#endregion 
} 
}