XP 风格的可拖动列、可排序、可改变宽度的DataGrid的例子 |
作者:孟宪会 出自:【孟宪会之精彩世界】 发布日期:2004年2月16日 8点58分34秒
|
利用客户端脚本的优势,我们可以创建出可以拖动列,改变列宽度,显示、隐藏列的XP风格的 DataGrid,下面就是所有的代码。自己调试时请注意修改eMeng.Exam.UltraGrid路径。
<%
@ 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 +=" "+(100-Tmp).ToString()+"%'>"+dr.GetName(i).ToString()+""; else TableHeader +=" "+ColWidth.ToString()+"%'>"+dr.GetName(i).ToString()+""; Tmp+=ColWidth; } } gridRow.InnerHtml = TableHeader; int RowNumber = 1 ; TableHeader = " " ; while (dr.Read()) ... { TableHeader += " "+RowNumber.ToString()+"'>"; for(int i=0;i<FieldNumber;i++) ...{ TableHeader +=""+dr.GetValue(i).ToString()+""; } TableHeader += " RowNumber ++ ; } TableHeader += " 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>
|
09-25