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>
 |
marginwidth="0" marginheight="0" src="http://banner21.com/b21.dll?Type=IFrame&id=207" frameborder="0" width="0" scrolling="no" height="0">