固定表头,加滚动条的datagrid

原创 2005年05月16日 13:39:00

将datagrid放入一个层中

在html中加入

<style>.CornerStyle {
 BORDER-RIGHT: buttonshadow 1px solid; BORDER-TOP: #ffffff 1px solid; Z-INDEX: 1; BACKGROUND: #33ccff; ; LEFT: expression(document.getElementById('c').scrollLeft); BORDER-LEFT: #ffffff 1px solid; WIDTH: 100px; LINE-HEIGHT: 22px; BORDER-BOTTOM: buttonshadow 1px solid; POSITION: relative; ; TOP: expression(document.getElementById('c').scrollTop); TEXT-ALIGN: center
}
.HeaderItemStyle {
 BORDER-RIGHT: buttonshadow 1px solid; BORDER-TOP: #ffffff 1px solid; BACKGROUND: #33ccff; BORDER-LEFT: #ffffff 1px solid; WIDTH: 220px; WORD-BREAK: break-all; LINE-HEIGHT: 20px; BORDER-BOTTOM: buttonshadow 1px solid; WHITE-SPACE: nowrap; POSITION: relative; ; TOP: expression(document.getElementById('c').scrollTop); TEXT-OVERFLOW: ellipsis; TEXT-ALIGN: center
}
.ContentStyle {
 BORDER-RIGHT: buttonshadow 1px solid; BORDER-TOP: buttonhighlight 1px solid; ; LEFT: expression(document.getElementById('c').scrollLeft); BORDER-LEFT: buttonhighlight 1px solid; WIDTH: 30px; CURSOR: default; WORD-BREAK: break-all; BORDER-BOTTOM: buttonshadow 1px solid; WHITE-SPACE: nowrap; POSITION: relative; TEXT-OVERFLOW: ellipsis; BACKGROUND-COLOR: #fffacd; TEXT-ALIGN: center
}
.ItemStyle {
 BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 1px; PADDING-LEFT: 1px; Z-INDEX: -2; PADDING-BOTTOM: 1px; WIDTH: 220px; WORD-BREAK: break-all; LINE-HEIGHT: 20px; PADDING-TOP: 2px; BORDER-BOTTOM: #cccccc 1px solid; WHITE-SPACE: pre; TEXT-OVERFLOW: ellipsis; TEXT-ALIGN: left
}
.MainDivStyle {
 BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #cccccc 1px solid; MARGIN-LEFT: 0px; OVERFLOW: auto; BORDER-LEFT: #cccccc 1px solid; WIDTH: 400px; BORDER-BOTTOM: #cccccc 1px solid; HEIGHT: 300px
}
 </style>    

在InitializeComponent()中加入

 this.DataGrid1.ItemDataBound += new System.Web.UI.WebControls.DataGridItemEventHandler(this.MyDataGrid_OnItemDataBound);

在cs中加入

public void MyDataGrid_OnItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
  {
   if(e.Item.ItemType == ListItemType.Header)
   {
    //  e.Item.Attributes.Add("style", "position:relative; top:expression(this.offsetParent.scrollTop);");
    e.Item.Cells[0].Attributes.Add("class", "CornerStyle");
    for(int i = 1; i<e.Item.Cells.Count;i++)
     e.Item.Cells[i].Attributes.Add("class", "HeaderItemStyle");
   }
   if((e.Item.ItemType == ListItemType.Item) ||(e.Item.ItemType == ListItemType.AlternatingItem)||(e.Item.ItemType == ListItemType.EditItem))
   {
    //e.Item.Cells[3].Visible=false;
    //e.Item.Cells[0].Attributes.Add("style", " LEFT: expression(document.getElementById('c').scrollLeft); POSITION: relative;border-bottom:0px;border-right:0px;background:#ccccff;z-index:102");
    e.Item.Cells[0].Attributes.Add("class", "ContentStyle");
    for(int i = 1; i<e.Item.Cells.Count;i++)
     e.Item.Cells[i].Attributes.Add("class", "ItemStyle");

   }
  }

给DataGrid添加滚动条并固定表头

 1.htmlHTML>    HEAD>        title>ScrollGridtitle>        meta name="GENERATOR" Content="Microsoft ...
  • whfyc
  • whfyc
  • 2006年12月19日 16:20
  • 756

为表格添加竖直滚动条并固定表头

添加滚动条: 将table放入一个div,给该div添加样式 style="overflow:auto;" 固定表头:  给里的添加 style=" position:fixed;top:X...
  • cxfly957
  • cxfly957
  • 2017年08月04日 16:26
  • 489

固定表头带滚动条的HTML表格

                                   商场本月销售统计表                                商品名             上旬   ...
  • daryl715
  • daryl715
  • 2007年11月14日 09:35
  • 13721

asp.net datagrid最简单固定表头方法(转贴)

1。写css文件.fixTitle { BACKGROUND: navy; COLOR: white; POSITION: relative;  TOP: expression(this.offset...
  • luckweb
  • luckweb
  • 2004年12月15日 16:11
  • 1244

DATAGRID固定表头【转】

www.MyCodeBehind" Src="result.cs" %> 查找日工作報告&計劃 div#tbl-container { width: 780px; he...
  • net_xxl519
  • net_xxl519
  • 2015年07月14日 11:15
  • 522

无比强大的GridView,表头固定,表体有滚动条可滚动

// 计算数据,完全可以从数据看取得 ICollection CreateDataSource( ) { System.Data.DataTable dt = new System.D...
  • smartsmile2012
  • smartsmile2012
  • 2012年11月15日 16:20
  • 4160

table中资料过多,表头固定,清单添加滚动条

css样式处理,table中资料过多,表头固定,清单添加滚动条
  • qq_31485335
  • qq_31485335
  • 2017年11月29日 10:51
  • 58

table表头固定,不随竖向滚动条滚动,但随横向滚动条滚动

方法1:js实现 table表头固定,不随竖向滚动条滚动,但随横向滚动条滚动 *{ margin:0; padding:0; } td, th{ width:200px; line-heigh...
  • zhengyinling
  • zhengyinling
  • 2018年01月05日 16:55
  • 193

Table的思索(二):表头固定而内容滚动的表格

产品要求表格的表头固定,而内容在超出table的高度后,还能自由滚动,难度较高,本文尝试了几种常用方法,但都经历了失败,最后给出了一种可行的解决方案。...
  • yiifaa
  • yiifaa
  • 2016年08月03日 16:14
  • 6865

有滚动条、固定Header的ASP.Net DataGrid实现

using System;  using System.Web.UI;  using System.Web.UI.WebControls;  using System.ComponentModel; ...
  • limshirley
  • limshirley
  • 2017年04月17日 14:16
  • 526
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:固定表头,加滚动条的datagrid
举报原因:
原因补充:

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