XP 风格的可拖动列、可排序、可改变宽度的DataGrid的例子

利用客户端脚本的优势，我们可以创建出可以拖动列，改变列宽度，显示、隐藏列的XP风格的 DataGrid，下面就是所有的代码。自己调试时请注意修改eMeng.Exam.UltraGrid路径。

查看例子

UltraGrid.aspx

<%@ Page language="c#" Codebehind="UltraGrid.aspx.cs" AutoEventWireup="false"
   Inherits="eMeng.Exam.UltraGrid.UltraGrid" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
   <title>XP 风格的可拖动列、可排序、可改变宽度的DataGrid的例子</title>
   <META http-equiv="content-type" content="text/html; charset=gb2312">
   <meta name="GENERATOR" Content="Microsoft Visual Studio 7.0">
   <meta name="CODE_LANGUAGE" Content="C#">
   <link rel="stylesheet" type="text/css" href="UltraGrid.css">
   <meta name="vs_defaultClientScript" content="JavaScript">
   <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="DragableXpStyleTable" method="post" runat="server">
   <div align="center" style="PADDING:5px">
   <b> XP 风格的可拖动列、可排序、可改变宽度的DataGrid的例子。</b>
   </div>
   <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>
</form>
</body>
</HTML>
UltraGrid.aspx.cs

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Data.OleDb;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace eMeng.Exam.UltraGrid
{
   /// <summary>
   /// UltraGrid 的摘要说明。本例子演示了如何创建可排序、可拖放、可调整宽度的XP风格的DataGrid。
   /// 出自：【孟宪会之精彩世界】
   /// </summary>
   public class UltraGrid : System.Web.UI.Page
   {
   protected System.Web.UI.HtmlControls.HtmlGenericControl gridRow;
   protected System.Web.UI.WebControls.Literal RowItem;
   protected System.Web.UI.HtmlControls.HtmlGenericControl coolUltraGrid1;
   private 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=c:""xxx.mdb");
   cn.Open();
   string sqlstring = "SELECT TOP 30 D.Title As 文档标题,D.CreateDate as 发布时间,S.Title AS 所属栏目 ";
   sqlstring += "FROM Document D,Subject S WHERE D.pid=S.id ORDER BY D.CreateDate DESC";
   OleDbCommand cmd = new OleDbCommand(sqlstring,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();
   }
#region Web Form Designer generated code
   override protected void OnInit(EventArgs e)
   {
   //
   // CODEGEN：该调用是 ASP.NET Web 窗体设计器所必需的。
   //
   InitializeComponent();
   base.OnInit(e);
   }

   /// <summary>
   /// 设计器支持所需的方法 - 不要使用代码编辑器修改
   /// 此方法的内容。
   /// </summary>
   private void InitializeComponent()
   {
   this.Load += new System.EventHandler(this.Page_Load);

   }
#endregion
   }
}

相关阅读:
爱你就是我的幸福
科学加艺术 85句管理名言
转：IPV6及在UBUNTU和windows下的安装
JXSE是否可以实现非阻塞IO?
Transmitting and Receiving RTP over Custom Transport Layer
多显示器
可靠的双向管道和不可靠的双向管道
the source for JMStudio
转：浅析 Java Thread.join()
Building Scalable and High Efficient Java Multimedia Collaboration

原文地址：https://www.cnblogs.com/lzhdim/p/1345905.html