XP 风格的可拖动列、排序的DataGrid的例子

原创 2005年04月27日 13:19:00





(CSS):
body
{
 background-color: buttonface;
 scroll: no;
 margin: 0px;
 border: none;
 overflow: hidden;
}

.xpTable
{
 behavior: url(xpTable.htc);
 sortNoneImageUrl: sortBlank.gif;
 sortUpImageUrl: sortUp.gif;
 sortDownImageUrl: sortDown.gif;
 posUpImageUrl: upArrow.gif;
 posDownImageUrl: downArrow.gif;
 position: relative;
    margin: 0px;
    width: 100%;
  font: menu;
 highlightBackgroundColor: #C1D2EE;
 highlightBorderColor: #316AC5;
 color: windowtext;
  cursor: default;
}
.xpTable THEAD TD
{
 border-left: 1px solid buttonhighlight;
 border-top: 1px solid buttonhighlight;
 border-bottom: 1px solid buttonshadow;
 border-right: 1px solid buttonshadow;
 font: menu;
 color: menutext;
 background-color: buttonface;
    cursor: hand;
    padding-top: 0px;
    padding-bottom: 1px;
}
.xpTable TBODY TR
{
 color: windowtext;
 background: window;
}


本文介绍XP 风格的可拖动列、排序的DataGrid的例子,请查看

要想使用本源代码,请先下载如下文件:

源代码如下:【C#版本】

DragableXpStyleTable.aspx

<%@ Page language="c#" Codebehind="DragableXpStyleTable.aspx.cs" AutoEventWireup="false" Inherits="eMeng.Exam.DragableXpStyleTable.DragableXpStyleTable" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML> <HEAD> <META http-equiv="content-type" content="text/html; charset=gb2312"> <title>XP 风格的可拖动列、排序的DataGrid的例子</title> <meta name="GENERATOR" Content="Microsoft Visual Studio 7.0"> <meta name="CODE_LANGUAGE" Content="C#"> <link rel="stylesheet" type="text/css" href="xpTable.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:20px"><b>XP 风格的可拖动列、排序的DataGrid的例子。</b></div> <asp:DataGrid id="xpTable" runat="server" AutoGenerateColumns="False" Cellpadding="2" BorderWidth="0" BorderStyle="None" STYLE="BORDER-COLLAPSE:separate" Width="90%" CssClass="xpTable"> <HeaderStyle HorizontalAlign="Center"></HeaderStyle> <Columns> <asp:BoundColumn ItemStyle-Height="22" DataField="Title" SortExpression="Title" HeaderText="文章标题" HeaderStyle-Font-Bold="True"></asp:BoundColumn> <asp:BoundColumn DataField="CreateDate" SortExpression="CreateDate" HeaderText="创建日期" HeaderStyle-Font-Bold="True" DataFormatString="{0:yyyy年MM月dd日 HH:mm:ss}"></asp:BoundColumn> <asp:BoundColumn DataField="SubTitle" SortExpression="SubTitle" HeaderText="所属栏目" HeaderStyle-Font-Bold="True"></asp:BoundColumn> </Columns> </asp:DataGrid> </form> </body> </HTML>

DragableXpStyleTable.aspx.cs

using System; using System.Collections; using System.ComponentModel; using System.Data; using System.Drawing; using System.Web; using System.Web.SessionState; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.HtmlControls; using System.Data.OleDb; namespace eMeng.Exam.DragableXpStyleTable { /// <summary> /// DragableXpStyleTable 的摘要说明。 /// XP风格的可拖动的DataGrid /// </summary> public class DragableXpStyleTable : System.Web.UI.Page { protected System.Web.UI.WebControls.DataGrid xpTable; private void Page_Load(object sender, System.EventArgs e) { // 在此处放置用户代码以初始化页面 xpTable.Attributes.Add("altRowColor","oldlace"); xpTable.Attributes.Add("align","center"); string cnString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="; cnString += System.Web.HttpContext.Current.Server.MapPath("TestTable.mdb") OleDbConnection cn = new OleDbConnection(cnString); cn.Open(); cnString = "SELECT TOP 15 D.Title,D.CreateDate,S.Title AS SubTitle "; cnString += "FROM Document D,Subject S WHERE D.pid=S.id ORDER BY D.CreateDate DESC"; OleDbCommand cmd = new OleDbCommand(cnString,cn); xpTable.DataSource=cmd.ExecuteReader(CommandBehavior.CloseConnection); xpTable.DataBind(); cmd.Dispose(); cn.Close(); cn.Dispose(); cn = null; } #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 } }

蓝牙技术反面观

蓝牙技术反面观 作者:阮帮秋 发布时间:2001/01/16  文章摘要:  蓝牙(Bluetooth)技术自倡导以来,短短两年时间里已风靡全球。摩纳哥蓝牙2000年大会推断,今后两年内使用蓝牙技术的...
  • CandyCat
  • CandyCat
  • 2001-05-18 19:53:00
  • 1088

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

  • 2008年10月29日 17:57
  • 5KB
  • 下载

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

  • 2007年11月30日 19:26
  • 268KB
  • 下载

XP 风格的可拖动列、排序的DataGrid

DragableXpStyleTable.aspx XP 风格的可拖动列、排序的DataGrid的例子 XP 风格的可拖动列、排序的DataGrid的例子。 ...
  • luyifeiniu
  • luyifeiniu
  • 2004-07-19 18:38:00
  • 1043

Easyui-Datagrid—表头灵活拖动

用户界面设计的一个重要原则是用户应该总是感觉在控制软件而不是感觉被软件所控制。 操作上假设是用户–而不是计算机或软件–开始动作。用户扮演主动角色,而不是扮演被动角色。在需要自动执行任务时,要以允许用户...
  • u010293698
  • u010293698
  • 2015-09-14 14:34:11
  • 5178

DataGrid实现拖动任意列的列头改变列宽度时,让其他列的宽度和他一样宽

首先创建列头的ColumnHeaderStyle: ...
  • porenasckx
  • porenasckx
  • 2013-05-21 09:42:40
  • 4987

[原作]在dataGrid中拖动改变列宽度,在asp.net中

在AppleBBS 的 Blog 中看了他的文章拖动改变Table的列宽度于是想能不能在asp.net中的datagrid中实现,因为dataGrid翻译的html为table于是做了改动functi...
  • mail_ricklee
  • mail_ricklee
  • 2005-02-05 15:13:00
  • 1696

easyui的dnd插件实现datagrid行拖拽

项目中出现一种需求:对某列表中元素进行手动排序,若使用按钮单击来向上或者向下效率低下,若直接手动输入序号更不科学=.=。因此最好的方式就是能够实现手动拖动某个行到想要的位置。因此首先需要实现datag...
  • tzdwsy
  • tzdwsy
  • 2015-08-09 13:56:28
  • 5615

XP 风格的可拖动列、排序的DataGrid的例子

(CSS):body{ background-color: buttonface; scroll: no; margin: 0px; border: none; overflow: hidden;}....
  • luoboqingcai
  • luoboqingcai
  • 2004-09-25 18:22:00
  • 723

easyui datagrid列实现动态拖拽列功能

easyui datagrid列实现动态拖拽列功能,测试在1.5.2版本下无报错
  • gxuehe
  • gxuehe
  • 2018-01-05 20:43:34
  • 229
收藏助手
不良信息举报
您举报文章:XP 风格的可拖动列、排序的DataGrid的例子
举报原因:
原因补充:

(最多只允许输入30个字)