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

 

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


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值