本文介绍如何使用客户端脚本创建具备拖动列、调整列宽等功能的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 +="
"+(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>
|
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
