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里为每个单元格设置宽度。

 

.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; }

        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 rowsif (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：

.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; }

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

                }

            }

        }