创建固定表头、表格体滚动的DataGrid

最新推荐文章于 2021-12-20 18:51:41 发布
最新推荐文章于 2021-12-20 18:51:41 发布
阅读量3.8k 收藏
点赞数
分类专栏： ASP.NET 文章标签： datagrid table string class web object
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/net_lover/article/details/6932
版权

创建固定表头、表格体滚动的DataGrid

孟子E章

在使用DataGrid时，有时候需要表头表头固定、表格体的内容可以滚动，下面的代码就是实现这个功能的代码。

查看例子

ShowFixedHeader.aspx

  <%@ Page Language="vb" EnableViewState="False" AutoEventWireup="false" Codebehind="ShowFixedHeader.aspx.vb" Inherits="aspxWeb.mengxianhui.com.ShowFixedHeader"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <title id="lucky_elove" runat="server"></title> <meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0"> <meta name="CODE_LANGUAGE" content="Visual Basic 7.0"> <meta name="vs_defaultClientScript" content="JavaScript"> <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"> </HEAD> <body MS_POSITIONING="GridLayout" leftmargin="0"> <table align="center"> <tr> <td> <form id="Form1" method="post" runat="server"> <TABLE id="Table1" runat="server" cellSpacing="1" cellPadding="2" width="720" border="1" bgcolor="#cc6633" bordercolor="#cc9966" style="FONT-SIZE:9pt;BORDER-BOTTOM:0px"> <TR align="center"> <TD colspan="2" width="430"></TD> <TD width="190" colspan="2"></TD> </TR> <TR align="center"> <TD width="360" bgcolor="#66cc99"></TD> <TD width="180" bgcolor="white"></TD> <TD width="140" bgcolor="#99cccc"></TD> <TD width="40" bgcolor="#009999"></TD> </TR> </TABLE> <div style="BORDER:0px;PADDING:0px;MARGIN:0px;OVERFLOW:auto;WIDTH:736px;HEIGHT:200px"> <asp:DataGrid id="DataGrid1" width="720px" CellPadding="2" CellSpacing="1" BorderColor="#cc9966" Font-Size="9pt" AlternatingItemStyle-BackColor="#6699ff" runat="server" ShowHeader="False" AutoGenerateColumns="False"> <Columns> <asp:BoundColumn DataField="Title"> <ItemStyle Width="360px"></ItemStyle> </asp:BoundColumn> <asp:BoundColumn DataField="CreateDate"> <ItemStyle Width="180px" HorizontalAlign="Center"></ItemStyle> </asp:BoundColumn> <asp:BoundColumn DataField="pid"> <ItemStyle Width="140px" HorizontalAlign="Center"></ItemStyle> </asp:BoundColumn> <asp:BoundColumn DataField="HitCount"> <ItemStyle Width="40px" HorizontalAlign="Center"></ItemStyle> </asp:BoundColumn> </Columns> </asp:DataGrid> </div> </form> </td> </tr> </table> </body> </HTML>

ShowFixedHeader.aspx.vb

  Imports System Imports System.Data Imports System.Data.OleDb Public Class ShowFixedHeader Inherits System.Web.UI.Page Protected WithEvents Table1 As System.Web.UI.HtmlControls.HtmlTable Protected WithEvents DataGrid1 As System.Web.UI.WebControls.DataGrid Protected WithEvents Form1 As System.Web.UI.HtmlControls.HtmlForm Protected WithEvents lucky_elove As HtmlControls.HtmlGenericControl #Region " Web Form Designer Generated Code " 'This call is required by the Web Form Designer. <System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent() End Sub Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init 'CODEGEN: This method call is required by the Web Form Designer 'Do not modify it using the code editor. InitializeComponent() End Sub #End Region Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load lucky_elove.InnerText = "【孟宪会之精彩世界】 - 跨栏表头的实现" Table1.Rows(0).Cells(0).InnerText = "【孟宪会之精彩世界】.NET版本之最新文章" Table1.Rows(0).Cells(1).InnerText = "文章信息" Table1.Rows(1).Cells(0).InnerText = "文章标题" Table1.Rows(1).Cells(1).InnerText = "发布时间" Table1.Rows(1).Cells(2).InnerText = "所属栏目" Table1.Rows(1).Cells(3).InnerText = "点击率" Table1.Rows(0).Style.Add("color", "white") Table1.Rows(0).Style.Add("font-weight", "bold") Table1.Rows(0).Cells(0).Attributes.Add("onclick",_ "window.open('http://lucky_elove.www1.dotnetplayground.com/')") Table1.Rows(0).Cells(0).Style.Add("cursor", "hand") Try Dim cnString As String = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="_ + Server.MapPath("Test.mdb") Dim cn As New OleDbConnection(cnString) cn.Open() Dim strSQL As String = "SELECT TOP 30 D.Title,D.CreateDate,S.Title as pid,D.HitCount "_ + "FROM Document D INNER JOIN Subject S ON D.pid = S.id ORDER BY CreateDate DESC" Dim cmd As New OleDbCommand(strSQL, cn) DataGrid1.DataSource = cmd.ExecuteReader DataGrid1.DataBind() cn.Close() cn = Nothing Catch eOle As OleDbException Response.Write("产生错误：" + eOle.Message) End Try End Sub Private Sub DataGrid1_ItemDataBound(ByVal sender As Object, _ ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles DataGrid1.ItemDataBound If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then If e.Item.Cells(0).Text.Length > 26 Then e.Item.Cells(0).Attributes.Add("Title", e.Item.Cells(0).Text) e.Item.Cells(0).Text = e.Item.Cells(0).Text.Substring(0, 26) + "…" End If e.Item.Cells(1).Text = Format(System.Convert.ToDateTime(e.Item.Cells(1).Text),_ "yyyy年M月d日 h点m分s秒") End If End Sub End Class
孟子E章
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
DataGrid固定表头
06-20
DataGrid锁定表头数据滚动,不需要后台代码,不用自定义Table
GridView或DataGrid 固定表头,滚动数据的例子学习心得
02-26
1.主要利用table style的 layout=fixed属性按照当前表头再copy一个table,显示在当前datagrid或gridview的前面. 2.注意:调用的时候,datagrid 或gridview 要有style="table-layout:fixed" 和 width=?? 属性.
DataGrid 复杂表头
06-05
Wpf DataGrid 复杂表头 自定义实现显示多阶层的表头
DataGrid固定表头，实现滑动效果
双人余公的博客
07-25 592
DataGrid固定表头，实现滑动效果 找固定表头的功能找了半天，尝试过了但都不行，后来看到一个思路，说隐藏第一行表头，然后自己写固定位置的文本当表头，确实可行，就是调整位置有点麻烦…… 1.DataGrid的属性里面加showheader="false"就是隐藏首行 2.表头直接写死位置，位置得自己慢慢试 <span class="x" style="position:absolute;left:290px;">A</span> <span class="x" style="
固定表头的DataGrid
09-15
固定表头的DataGrid
gridview固定表头 横向滚动 纵向固定
07-25
gridview固定表头 横向滚动 纵向固定，即拖动横向滚动条时，表头随着表体移动，纵向拖动滚动条时，表头不动，实践得出来的结果 我用的是VS2010，C#
datagrid 多表头及动态生成的实现
01-05
前台使用Jquery EasyUI 插件datagrid实现多表头动态生成的功能
DataGrid表头锁定总结
我的鱼塘
10-08 2161
  在网上找了许多资料也发现很多实现DataGrid表头锁定的方法，但总觉的太杂太乱，将自己认为比较实用的两个解决方法列举出来。   l         方案一:使用HTC实现表头锁定。 这个方法比较简单，只要给DataGrid套用CSS样式就可以了。但这种方法有个弊端，就是列数过多时，会造成表头和表的内容错位，影响用户使用。 1.       给页面添加样式。 &lt;STYLE&gt; .tb...
EasyUI 数据表格datagrid列自适应内容宽度的实现
01-19
项目初期在加载数据表格的时候为了提高表格数据渲染速度，设置了默认宽度。 现需求需要加一个表格自适应的功能，触发改功能，改变列宽度，但是不重新渲染表格，不发生数据请求。 设计思路，遍历每项的所有数据，...
DataGrid 实现复杂表头和合并行源码与示例
09-21
一、不需要编写任何样式、只需通过代码添加将 ColumnItem 集合添加到DataGrid列集合,需要引用空间 using System.Windows.Controls ，才能添加扩展函数。 二、支持实现复杂的表头、不限分级层次； 三、复杂表头支持位置拖动、 列宽度拖动，组内列会按比例自动调整； 四、支持模拟行合并，即对象中存在集合成员； 五、支持自定义转换器（IValueConverter）； 六、支持对象集合(ICollection)和支持动态字典集合(ICollection<IDictionary>)的绑定 ； 七、对象集合使用 AddBindingPathTemplateColumn 函数，字典集合使用 AddBindingParameterTemplateColumn 函数 八、详见示例。
datagrid 实现 表头水平可以移动 垂直固定
dazhi5407的博客
09-27 80
点击下载 datagrid 包括dll demo 源码 详情：http://www.codeproject.com/KB/webforms/ScrollingGrid.aspx 效果图：http://www.ixnay2infinity.com/ScrollingGrid/Demo.aspx 转载于:https://www.cnblogs.com/0banana0/arch...
datagrid绑定list没有数据 表头不显示的解决方法
10-27
datagrid绑定list没有数据 表头不显示的问题,那是因为 绑定了null,你给list new一下就好 表头就会有啦
dataGrid 多维表头、表头跨行跨列设计及绑定数据
10-27
dataGrid　其实就是一个html table,本文将介绍dataGrid 多维表头，表头跨行跨列设计方法需要了解的朋友可以参考下
gridview固定表头的一个实例
08-06
gridview固定表头 横向滚动 纵向固定，即拖动横向滚动条时，表头随着表体移动，纵向拖动滚动条时，表头固定不动 实践中所得一个具体实例 VS2010，C#
纯CSS实现表头固定表格滚动条效果
12-24
纯CSS实现表头固定表格滚动条效果，所需代码不多兼容浏览器。方便移植至JSP、ASP、PHP。好用记得评论喔
jquery-easyui拓展之datagrid复合表头列锁定/解锁和列隐藏/显示
08-10
http://blog.csdn.net/tianxiawudi0720/article/details/47401399
easyui datagrid 表头固定（垂直滚动条）、列固定（水平滚动条）
banshurenliyaping的博客
11-30 2960
最近用多了easyui 之后还是觉得它的功能还是很强大的。它原有的功能就已经能够满足90%以上的界面需求。 1、当数据行很多时，会呈现垂直的滚动条，但是向下滚动，表头却被淹没了，这不符合人类偷懒的特点（我怎么可能记得住每列的数据代表的意思！），所以需要固定表头。 datagrid.datagrid({ fit: true }); 对，没错，就是这个属性，就这么简单！我也是看了网上的各位大神之后才懂。我看了多遍easyui的api（当然是中文的）没有！！下次看看英文...
easyui datagrid 使用技巧汇总
yqj234的专栏
12-20 1159
easyui datagrid 表头固定（垂直滚动条）、列固定（水平滚动条），每页显示1000行 一表头固定 1 当数据行很多时，会呈现垂直的滚动条，但是向下滚动，表头却被淹没了，所以需要固定表头。 datagrid.datagrid({ fit: true }); 二冻结表列 2 当数据列很多时，会出现水平滚动条。某些列时特定要一直显示的(冻结列)。 datagrid.datagrid({ frozenColumns: [[ ...
wpf datagrid 复合表头
最新发布
07-22
### 回答1： WPF DataGrid复合表头用于在表格中显示多级标题。在DataGrid中，复合表头可以以层次结构的方式组织和显示列标题，使用户更好地理解和管理表格数据。 要创建复合表头，我们可以使用DataGridTemplateColumn和HeaderTemplate属性。首先，我们需要定义一个复合表头模板，其中包含多个层次结构的标题。可以使用StackPanel或Grid等容器控件来组织这些层次结构。 下面是一个示例，展示了如何创建一个具有两个层次结构的复合表头： ```xaml <DataGrid> <DataGrid.Columns> <DataGridTemplateColumn> <DataGridTemplateColumn.HeaderTemplate> <DataTemplate> <Grid> <Grid.RowDefinitions> <RowDefinition /> <RowDefinition /> </Grid.RowDefinitions> <TextBlock Grid.Row="0" Text="第一级标题" /> <TextBlock Grid.Row="1" Text="第二级标题" /> </Grid> </DataTemplate> </DataGridTemplateColumn.HeaderTemplate> </DataGridTemplateColumn> </DataGrid.Columns> </DataGrid> ``` 上述示例中，我们创建了一个DataGridTemplateColumn，并将其HeaderTemplate属性设置为一个包含两个TextBlock的Grid。这样，第一级标题和第二级标题就以层次结构的方式显示在表头中。 通过使用嵌套的容器控件和定义适当的布局，我们可以创建更复杂的多级标题结构。在实际使用中，我们可以根据需求进行自定义和扩展，以满足复杂表格的显示需求。 总的来说，WPF DataGrid复合表头提供了一种更灵活和直观的方式来管理和展示表格数据，使用户能够更好地理解和操作数据。 ### 回答2： WPF DataGrid是一个强大的控件，允许我们通过使用复合表头来组织和显示数据。复合表头是指一个表头下面有多个子表头的情况。 要在WPF DataGrid中使用复合表头，我们需要使用DataGrid的ColumnHeaderStyle属性来自定义表头的样式。我们可以使用StackPanel控件来嵌套多个表头，并设置每个表头的样式和内容。 首先，我们需要创建一个StackPanel来作为根表头。然后，我们可以使用TextBlock或其他控件来添加子表头，并设置它们的样式和内容。我们可以使用Margin属性来设置每个子表头之间的间距。 接下来，我们需要将StackPanel添加到DataGrid的ColumnHeaderStyle属性中。这样，每个列的表头都会根据这个样式进行显示。 如果我们想要在复合表头中显示具有层次结构的数据，可以使用HierarchicalDataTemplate来定义每个子表头的内容。HierarchicalDataTemplate允许我们绑定嵌套的数据，并在子表头中显示它们。 最后，我们可以根据需要自定义表头的外观，比如设置颜色、字体等属性。我们可以使用Setter和Trigger来实现这些自定义样式。 总之，WPF DataGrid允许我们通过使用复合表头来组织和显示数据。我们可以使用StackPanel来创建复合表头，并使用ColumnHeaderStyle属性和HierarchicalDataTemplate来自定义表头的样式和内容。通过这种方式，我们可以创建出功能强大且易于使用的数据表格。 ### 回答3： WPF DataGrid是一种用于呈现和编辑数据的控件，它支持复合表头。复合表头是指表格中的表头可以跨越多列或多行，提供更灵活和复杂的布局。 要实现复合表头，我们可以使用DataGrid的列合并功能。首先，在DataGrid的XAML代码中，我们可以定义多个DataGridTextColumn或其他类型的列，并为每个列设置相应的属性和样式。然后，我们可以在需要合并的列中使用DataGrid.ColumnHeaderStyle属性来设置合并样式。 可以通过设置DataGrid.ColumnHeaderStyle中的ContentTemplate属性来定义自定义表头。在ContentTemplate中，我们可以使用Grid来创建一个包含多个单元格的布局。通过设置Grid的列或行的宽度和高度，我们可以控制表头中每个单元格的大小和位置。还可以在每个单元格中添加文本或其他控件来自定义表头的内容。 除了定义自定义表头的布局，我们还可以使用DataGrid.ColumnHeaderStyle中的其他属性来设置表头的外观，如前景色、背景色、字体样式等。这样，我们就能够创建出符合我们需求的复合表头了。 在绑定数据时，我们只需要将数据源的属性与对应的表格列进行绑定，DataGrid会自动将数据显示在表格中。由于复合表头的实现是基于DataGrid的列合并功能，因此绑定数据时并不需要额外的操作。 通过实现复合表头，我们可以打造出专业而美观的数据展示界面，提高用户的数据浏览和编辑体验。同时，WPF DataGrid的强大功能和灵活性也使得复合表头的实现变得简单而有效。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

孟子E章

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值