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

datagrid|可拖动|排序

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

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

downarrow.gif
sortBlank.gif
sortUp.gif
sortDown.gif
uparrow.gif
xpTable.css
xpTable.htc

源代码如下:【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
}
}

时间: 2024-12-25 22:35:43

XP 风格的可拖动列、排序的DataGrid的例子的相关文章

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

datagrid|可拖动|排序 利用客户端脚本的优势,我们可以创建出可以拖动列,改变列宽度,显示.隐藏列的XP风格的 DataGrid,下面就是所有的代码.自己调试时请注意修改eMeng.Exam.UltraGrid路径. 查看例子 UltraGrid.aspx <%@ Page language="c#" Codebehind="UltraGrid.aspx.cs" AutoEventWireup="false" Inherits=&qu

怎样实现XP风格按钮

示例代码运行效果图 在vc6下面怎样实现具有xp风格的按钮?我这里介绍一种简单的方法. 我们需要用到两个类,一个是CButtonST,另一个是CWinXpButtonST.这两个类一个是按钮类,另一个是Xp风格按钮类,大家可以从我的例子原代码中得到相关的4个文件(BtnST.h.BtnST.cpp.WinXPButtonST.h.WinXPButtonST.cpp). 下面开始制作这个示例程序  1.使用vc的向导制作一个工程dialog工程,起名为:XPDlg.并接受一切默认值. 2.将我上面

avalon js实现仿微博拖动图片排序_javascript技巧

下文针对仿微博图片随意拖动,调整图片的顺序,讲解的很详细,文章肯定还有欠缺的地方,欢迎提出批评改正.废话不多说了,看具体内容吧. 点击此处进入源码下载 什么是拖动图片排序? 就像微博这种,上传后允许用户通过拖动图片,调整几张图片的顺序. 可以看到微博在这里把每张图片固定了尺寸,稍微严谨点的话,就需要像上一篇文章那样,外面是响应式的等高等宽的若干div容器,里面则是等比例缩放的响应式图片. 下面说下要求. 1.当然首先图片要可以拖动. 2.图片移出其原本的位置,拖动到目标位置并且未松开鼠标完成拖动

Photoshop制作精致的XP风格任务栏

在设计多媒体光盘.多媒体课件的用户界面时,许多设计者喜欢制作仿真Windows任务栏和开始菜单.因为平常大家接触最多的界面恰恰就是Windows的桌面环境,所以这种风格的用户界面为许多用户所喜爱. 设计这类界面的关键是制作出逼真的任务栏和开始按钮,今天我们来介绍一下如何使用Photoshop制作这种逼真的任务栏和开始按钮. 本文以Photoshop CS中文版为例,其他版本类似. 文章末尾提供.psd文件供大家下载参考. 完成效果: 绘制过程: 1.运行Photoshop CS中文版,新建一个大

Fireworks MX制作指南-Windows XP风格按钮步步通

window|按钮 用过Windows XP的朋友都为它漂亮的界面所动心,现在我们用Fireworks MX只需几步即可制作一个赏心悦目的Windows XP风格的按钮. 第一步:外形/渐变填充利用矩形工具在画布中央拉出一个圆角矩形:打开填充面板(快捷键"Shift+F7")从下拉菜单中选择"线性":然后使用选择工具来调整按钮的渐变属性. 第二步:内侧阴影选中矩形图形,打开效果面板并从下拉菜单中选择"阴影与发光→内侧阴影":选择阴影参数(如图1)

FWMX一例XP风格按钮的制作

按钮 我也不知道这算不算XP风格,反正是大家很常见很流行的,今天在经典帮别人回复了源文件,干脆凑篇教程上来.基本上没什么难度,算是新手入门吧.     我们使用Fireworks 4制作这样的效果,Fwmx只要在工具与属性面板中找到相应参数设置就行了.     1.新建画布,大小100×100,背景为白色.     2.用圆角矩形工具画一个矩形,大小随意,在OBJECT面板中设置矩形的圆角度.     3.设置圆角矩形边框色如下(色系#B6B6B6):     4.对圆角矩形进行线形填充,参数设

ASP.Net2.0 GridView 多列排序,显示排序图标,分页

asp.net|分页|排序|显示     最近在使用ASP.net 2.0的GridView 控件时,发现排序与分页功能Microsoft实现的都很简单,比如排序,在点击列名的时候来触发整页的PostBack,然后排序,但是在列头上没有一个显示升序降序的图标,这会让最终用户使用时很迷惑,因为不知道是升序了还是降序了,所以今天首先解决的第一问题就是升序降序在列上显示图标,第二要解决的问题是默认GridView按列排序只能排一列的,也就是不能进行多列排序,而在实际应用中仅仅按照一列来排序是不能满足业

一例XP风格按钮的制作

按钮 我也不知道这算不算XP风格,反正是大家很常见很流行的,今天在经典帮别人回复了源文件,干脆凑篇教程上来.基本上没什么难度,算是新手入门吧. 我们使用Fireworks 4制作这样的效果,Fwmx只要在工具与属性面板中找到相应参数设置就行了. 1.新建画布,大小100*100,背景为白色. 2.用圆角矩形工具画一个矩形,大小随意,在OBJECT面板中设置矩形的圆角度. 3.设置圆角矩形边框色如下(色系#B6B6B6): 4.对圆角矩形进行线形填充,参数设置如下: 5.现在把你设置好的这个矩形克

Windows XP风格按钮步步通

window|按钮 用过Windows XP的朋友都为它漂亮的界面所动心,现在我们用Fireworks MX只需几步即可制作一个赏心悦目的Windows XP风格的按钮. 第一步:外形/渐变填充 利用矩形工具在画布中央拉出一个圆角矩形:打开填充面板(快捷键"Shift+F7")从下拉菜单中选择"线性":然后使用选择工具来调整按钮的渐变属性. 第二步:内侧阴影 选中矩形图形,打开效果面板并从下拉菜单中选择"阴影与发光→内侧阴影":选择阴影参数,最后