DataGrid应用（二） —— 滚动条的设计

最新推荐文章于 2024-11-18 19:36:16 发布

机器人

最新推荐文章于 2024-11-18 19:36:16 发布

阅读量8k

点赞数

分类专栏： [02] ASP.NET 文章标签： datagrid button table object css textbox

本文链接：https://blog.youkuaiyun.com/fangxing80/article/details/551568

版权

[02] ASP.NET 专栏收录该内容

24 篇文章

订阅专栏

为DataGrid加上滚动条，众所周知可以通过嵌套在<div></div>里来实现。我先总结一下这些方法：

1. 利用div的overflow的特性，我们可以设计出表格的滚动条。但是我们通常需要一个固定不动的表头，因为整个datagrid放在div中，无法使表头固定不动。（方法二，可以利用css固定)，我们设计需要另一个<table>来作为表头，同时，将由div包含着的datagrid的表明细行对齐表头，形成完整的表格。格式如下：

现在是如何能保证表头和DataGrid中的Cell的宽度对齐。可以看到，将“表头”和 “明细行”放在一个<td>里能保证他们的边缘对齐。现在，如何保证他们中间线对齐呢？

当DataGrid不用表头之后，无法利用表头的Style控制DataGrid中的Cell宽度，为了保证中间的单元格对齐，我们在ItemDataBound里为每个单元格设置宽度。

private void DataGrid1_ItemDataBound(object sender, DataGridItemEventArgs e)

{

e.Item.Cells[0].Style.Add("width", "30%");

e.Item.Cells[1].Style.Add("width", "30%");

e.Item.Cells[2].Style.Add("width", "30%");

}

同样，表头里的单元格也设置同样的宽度。效果如下：

2. 上面的方法，比较简单。就是需要添加HTML，而且对于横向的滚动条并没有控制。这里接着说明另一种办法，从codeproject上看来的。主要是通过CSS来控制。原贴地址：http://www.codeproject.com/aspnet/FreezePaneDatagrid.asp

关键是这句：

TH { BORDER-RIGHT: silver 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 14px; Z-INDEX: 10; CURSOR: default; COLOR: white; POSITION: relative; TOP: expression(document.getElementById("div-datagrid").scrollTop-2); BACKGROUND-COLOR: navy; TEXT-ALIGN: center }

我们知道DataGrid被转换成标准HTML标签在客户端显示，表头都将被转换成<TH>标签。首先是位置成为相对,而不是绝对位置显示。顶端位置则是滚动条顶部位置之下2px。

其所用CSS:

效果如下：