为DataGrid添加scrollbar并固定header

最新推荐文章于 2022-08-26 15:34:00 发布
最新推荐文章于 2022-08-26 15:34:00 发布
阅读量821 收藏
点赞数
分类专栏： .NET技术 文章标签： datagrid header stylesheet asp div server
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/l1981z/article/details/3739357
版权
本文介绍了如何在ASP.NET中为DataGrid添加滚动条，并使用CSS固定表格的头部。通过在页面中创建一个具有滚动条的DIV区域，然后将DataGrid放入其中，并应用特定的CSS样式，特别是使用.gridFixedHeader类来实现头部固定。CSS文件中的关键代码是设置position为relative和利用expression计算offsetParent.scrollTop，确保头部在滚动时保持可见。
摘要由CSDN通过智能技术生成

1.首先在页面中划出一个带有滚动条的区域：
<DIV style="OVERFLOW:auto; WIDTH:54.55%; HEIGHT:136px; TEXT-ALIGN:left">

</DIV>

2.将datagrid添加到区域之中并引用css固定标题：

<HEAD>
    ......

    <link rel="stylesheet" href="StyleSheet1.css" type="text/css">

</HEAD>


<body〉
<DIV style="OVERFLOW:auto; WIDTH:54.55%; HEIGHT:136px; TEXT-ALIGN:left">


<asp:datagrid id="DataGrid1" runat="server" AllowSorting="True" Height="96px" GridLines="Vertical"
     CellPadding="3" BackColor="White" BorderWidth="1px" BorderStyle="None" BorderColor="#999999"
     Width="592px" ShowHeader="true">
  <SelectedItemStyle Font-Bold="True" Wrap="False" ForeColor="

最低0.47元/天 解锁文章
l1981z
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小程序实现上拉加载
zuiruolong的博客
12-25 2300
无论是微信小程序还是其他前端框架，都会遇到上拉加载（上拉加载也是懒加载）和下拉刷新这种问题，清楚的知道什么时候请求数据，请求返回几种情况，那么做这个懒加载就很简单了。 1.首先我们固定一个列表数据的view高度让他的列表数据超过容器就可以滚动了。 2.那么列表的数据请求就会分成两种情况，一种是初始化页面加载第一页的数据；一种是滚到底部请求下一页的数据，所以我们在请求时要分两种情况，若是第一个ispage=false，下一页数据就ispage=true 3.第一步的固定高度的view，它在往上滚动的时候，滚动
固定表头的DataGrid
09-15
固定表头的DataGrid
datagrid中添加滚动条
热门推荐
mdot的专栏
12-05 1万+
DATAGRID中是没滚动条的，要添加的话其实很简单，只需要： 其实是利用了CSS属性
有滚动条、固定Header的ASP.Net DataGrid实现
weixin_30538029的博客
06-17 110
有滚动条的ASP.Net DataGrid控件：　　using System;　　using System.Web.UI;　　using System.Web.UI.WebControls;　　using System.ComponentModel;　　using System.Diagnostics;　　using System.IO;　　using System.Web.U...
Sliverlight，为DataGrid添加外置的滚动条(ScrollBar)和分页(DataPager)
wushang923的专栏
01-17 4513
最开始的情况： 希望的效果： 方法1：我修改了DataGrid的样式，是可以达到目的，不过要配好外面的DataPager来确定位置，如果DataPager的宽度改变了，那么就需要手动再去修改Style里滚动条位置(不过一般情况也不会去修改~)。 方法2：在外面创建一个ScrollBar然后通过这个滚动条来控制表格的滚动。 想到了绑定，不过直接在DataG
wpf datagrid滑动条
11-05
可以创建一个资源字典，定义新的`ScrollViewer.Style`和`ScrollBar.Style`，然后将其添加到你的`DataGrid`或者整个应用程序中。 5. **数据绑定** - `DataGrid`通常与数据源进行绑定，使用`ItemsSource`属性指定...
WPF DataGrid自定义样式模板 列表头分隔线 滚动条滑块大小设定 动态数据绑定和更新
qq_20758141的博客
06-28 8351
[ 效果图回去放，代码在后面 ][ 用到的一些定义如果没有附代码可以随便写个看下效果，因为直接从项目中copy出来的，难免漏掉点点... ]首先，有几点需要注意：1.表头样式 [ DataGridColumnHeader ]  默认带分割线，但每列表头左右分割线都占1px，也就是说假如有三列：a.  表格最左、右边应该不需要分割线，但默认的有1pxb.  中间需要1px分割线，但默认有2px（相邻...
解决WPF ScrollViewer中嵌套其他（DataGrid、ItemsControl等等）控件后，鼠标滚动不响应
wu_pan123的博客
06-24 1374
解决wpf ScrollViewer中嵌套其他（DataGrid、ItemsControl等等）控件后，鼠标滚动不响应
如何冻结DataGrid的特定列
穿鞋的猫
08-09 4499
今天上网找了好久，用了个笨方法，css来实现，据说VS 2005 dataview就可以，可惜小弟还苦苦使用vs 2003现在把我的方法分享下第一步：添加datagrid的itembound事件选择需要冻结列的css样式 //冻结前7列            e.Item.Cells[0].CssClass = "locked";            e.Item.Cel
DataGrid固定表头
06-20
DataGrid锁定表头数据滚动,不需要后台代码,不用自定义Table
WPF设置表头
12-26
动态Datagrid设置表头，由用户自己设置该字段是否在界面显示
DATAGRID固定表头【转】
dancer 的专栏
07-14 1653
www.MyCodeBehind" Src="result.cs" %> 查找日工作報告&計劃 div#tbl-container { width: 780px; height: 290px; overflow: auto; scrollbar-base-color:#ffeaff; } table { table-layout: fixed; bo
datagrid固定头
cuizhanjun1981的专栏
04-08 552
//把头css设置为这个就可以了。.fixHeaderStyle { font-size: 9pt; vertical-align: middle; text-transform: capitalize; font-family: "Arial" , "Helvetica" , "sans-serif"; height: 25px; background-color: #ecf4fe; text-
silverlight中DataGrid的滚动条绑定事件问题
07-07 120
今天遇到一个问题： 需要在点击红色框中的滚动条时，将窗体在最上层显示，点击datagrid的其它地方都能让窗口最上层显示，唯独滚动条不可以。 但是在silverlight不能获取到DataGrid的滚动条对象，这点很郁闷。按理说它是DataGrid的一部分，在DataGrid的控件范围内点击都能触发DataGrid的 鼠标点击事件，事实却让我很失望。 最后找到以下解决方法: ...
WPF DataGrid 通过自定义表头模拟首行固定
dotNET跨平台
09-26 1863
WPF DataGrid 通过自定义表头模拟首行固定独立观察员 2021 年 9 月 25 日最近工作中要在WPF中做个表格，自然首选就是DataGrid控件了。问题是，UI 设计...
WPF DataGrid设置滚动条宽度
悠然的博客
02-18 2676
1.引用命名空间 xmlns:sys=“clr-namespace:System;assembly=mscorlib” 2.设置宽度 <DataGrid> <DataGrid.Resources> <sys:Double x:Key="{x:Static SystemParameters.VerticalScrollBarWidthKey}">5</sys:Double>//垂直 <sys:Double x:Key="{x:Stat
WPF七（DataGrid 滑轮滚动事件多种处理方式）
PassionLong的博客
08-26 4270
WPF DataGrid 滑轮滚动事件多种处理方式
DataGrid添加四列并绑定数据源
最新发布
04-24
好的，您可以使用以下代码向DataGrid添加四列并绑定数据源： ``` <DataGrid x:Name="myDataGrid" AutoGenerateColumns="False"> <DataGrid.Columns> <DataGridTextColumn Header="ID" Binding="{Binding ID}" /> <DataGridTextColumn Header="Name" Binding="{Binding Name}" /> <DataGridTextColumn Header="Age" Binding="{Binding Age}" /> <DataGridTextColumn Header="Address" Binding="{Binding Address}" /> </DataGrid.Columns> </DataGrid> ``` 请相应修改数据绑定的属性名和表头名。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值