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

为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:

<style> TD { FONT-SIZE: 12px } DIV#div-datagrid { BORDER-RIGHT: gray thin solid; BORDER-TOP: gray thin solid; OVERFLOW: auto; BORDER-LEFT: gray thin solid; WIDTH: 520px; BORDER-BOTTOM: gray thin solid; SCROLLBAR-BASE-COLOR: #ffeaee; HEIGHT: 200px } TD.locked { BORDER-RIGHT: silver 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 14px; ; LEFT: expression(document.getElementById("div-datagrid").scrollLeft-2); CURSOR: default; COLOR: white; POSITION: relative; BACKGROUND-COLOR: navy; TEXT-ALIGN: center } TH.locked { BORDER-RIGHT: silver 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 14px; ; LEFT: expression(document.getElementById("div-datagrid").scrollLeft-2); CURSOR: default; COLOR: white; POSITION: relative; BACKGROUND-COLOR: navy; TEXT-ALIGN: center } 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 } TH.locked { Z-INDEX: 99 } .GridRow { FONT-SIZE: 10pt; COLOR: black; FONT-FAMILY: Arial; HEIGHT: 35px; BACKGROUND-COLOR: #ffffff } .GridAltRow { FONT-SIZE: 10pt; COLOR: black; FONT-FAMILY: Arial; HEIGHT: 35px; BACKGROUND-COLOR: #eeeeee } BODY { BACKGROUND: buttonface; COLOR: windowtext } </style>

效果如下：

利用该CSS以及javascript还可以实现列冻结的效果。

function lockCol(tblID) { var table = document.getElementById(tblID); var button = document.getElementById('toggle'); var cTR = table.getElementsByTagName('tr'); //collection of rows if (table.rows[0].cells[0].className == '') { for (i = 0; i < cTR.length; i++) { var tr = cTR.item(i); tr.cells[0].className = 'locked' } button.innerText = "Unlock First Column"; } else { for (i = 0; i < cTR.length; i++) { var tr = cTR.item(i); tr.cells[0].className = '' } button.innerText = "Lock First Column"; } }

设计一个<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

}

}

}