| 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 +="<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>
|
