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