IDC资讯中心
利用客户端脚本的优势，我们可以创建出可以拖动列，改变列宽度，显示、隐藏列的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);
}
<
