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>

 




你可能感兴趣的:(XP 风格的可拖动列、可排序、可改变宽度的DataGrid的例子)