为DataGrid加上滚动条,众所周知可以通过嵌套在<div></div>里来实现。我先总结一下这些方法:
1. 利用div的overflow的特性,我们可以设计出表格的滚动条。但是我们通常需要一个固定不动的表头,因为整个datagrid放在div中,无法使表头固定不动。(方法二,可以利用css固定),我们设计需要另一个<table>来作为表头,同时,将由div包含着的datagrid的表明细行对齐表头,形成完整的表格。格式如下:
<table>
<tr>
<td>
<table>
<!-- 表头部分 -->
</table>
<div style="OVERFLOW: auto;HEIGHT: 300px">
<!-- DataGrid (明细行) -->
</div>
</td>
</tr>
</table>
现在是如何能保证表头和DataGrid中的Cell的宽度对齐。可以看到,将“表头”和 “明细行”放在一个<td>里能保证他们的边缘对齐。现在,如何保证他们中间线对齐呢?
当DataGrid不用表头之后,无法利用表头的Style控制DataGrid中的Cell宽度,为了保证中间的单元格对齐,我们在ItemDataBound里为每个单元格设置宽度。
<style type="text/css">
.cf { font-family: SimSun; font-size: 10pt; color: black; background: silver; border-top: windowtext 1pt solid; padding-top: 0pt; border-left: windowtext 1pt solid; padding-left: 0pt; border-right: windowtext 1pt solid; padding-right: 0pt; border-bottom: windowtext 1pt solid; padding-bottom: 0pt; }
.cl { margin: 0px; }
.cb1 { color: blue; }</style>
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:
效果如下:
利用该CSS以及javascript还可以实现列冻结的效果。
设计一个<asp:TextBox>和<asp:Button>,输入要冻结的列序号,点击按钮实现列冻结。需要在ItemDataBound事件里,设置单元格的CSS:
<style type="text/css">
.cf { font-family: SimSun; font-size: 10pt; color: black; background: silver; border-top: windowtext 1pt solid; padding-top: 0pt; border-left: windowtext 1pt solid; padding-left: 0pt; border-right: windowtext 1pt solid; padding-right: 0pt; border-bottom: windowtext 1pt solid; padding-bottom: 0pt; }
.cl { margin: 0px; }
.cb1 { color: blue; }
.cb2 { color: green; }</style>
private void Button1_Click(object sender, System.EventArgs e)
{
BindData();
}
private void DataGrid1_ItemDataBound(object sender, DataGridItemEventArgs e)
{
if(this.TextBox1.Text != "")
{
try
{
int col = Convert.ToInt32(this.TextBox1.Text);
if (col < e.Item.Cells.Count - 1)
{
for(int i=0; i<col; i++)
{
e.Item.Cells[i].CssClass = "locked";
}
}
}
catch
{
//Ignore
}
}
}
分享到:
相关推荐
asp.net 中 datagrid 标题跟内容列对齐
WPF 中在datagrid中使用滚动条显示所有数据。 初学,欢迎交流。 下载次数越多所需积分越高,不定期改低积分。
1、分页控件DataPager的简单使用。 2、可以控制外置的ScrollBar来实现对指定DataGrid的滚动操作。
自定义DataGrid的列标题样式,行样式,鼠标悬浮及选择样式。 自定义滚动条样式,包括箭头及滚动区。
IOS应用源码——自制 iPhone DataGrid 数据列表组件,支持行列锁定Grid.zip
IOS应用源码——自制 iPhone DataGrid 数据列表组件,支持行列锁定Grid.rar
怎样使DataGrid支持鼠标滚轮滚动记录-精品源代码
2.0DataGrid嵌套DataGrid,里面的鼠标滚动响应到外部,利用自定义命令传递滚轮事件参数实现,详细效果请移步: https://blog.csdn.net/u010438205/article/details/105710794
在WPF中,如果DataGrid里使用了模板列,当拖动滚动条时,往往会出现列表内容显示混乱的情况。解决方法就是在Binding的时候给UpdateSourceTrigger赋值。 <RowDefinition Height=25></RowDefinition> ...
VB6.0中DataGrid的应用
自己写的一个小例子,关于实现datagrid逐行显示的例子,类似于滚动新闻。粗糙
DataGrid 底部合计,在DataGrid 的外部,底部横向滚动条的下面做的汇总。
ASP.NET DataGrid应用汇总
WPF之DataGrid应用
Datagrid应用,GridView应用
wpf通过datagrid操作数据库,实现datagrid增删改操作。
DataGrid鼠标滚动 基于msflexgrid功能改良扩展示例----商业日报和私人旅行里程
关于vs2010中c#的WPF应用。DataGrid是个很好的应用。
几个Flex datagrid 应用的小例子,适合新手学习
VB6 设计带记忆的数据录入窗口,这种记忆实际上是将DataGrid临时输入的数据存入到数据库中了,是一个数据库应用范例,本例子中的数据库采用的Access。在本例中,用户临时对任意DataGrid行列操作时输入的内容,临时...