可排序的YahooStyle GridView

效果如下图:

 或访问:http://developer.yahoo.com/yui/examples/datatable/dt_basic_clean.html

首先下载下面三个图片,在项目中建立文件夹名为Img,将下载的图片存于其中.

  

如图:

下一步将一个Gridview加到页面中,因为我们要通过CSS控制控制页面的风格,所以需要设置GridView的属性HeaderStyle的CssClass =headerstyle,AlternatingRowStyle的CssClass="altrowstyle",RowStyle的CssClass="rowstyle" ,最后将GridView的CssClass="tablestyle" .

页面代码如下:

< asp:GridView 
     ID ="gvCustomers"  runat ="server"  CssClass ="tablestyle"  
    AllowSorting ="true"  DataSourceID ="odsCustomers"  
    OnRowDataBound ="GvCustomers_RowDataBound"  AutoGenerateColumns ="false" >
     < AlternatingRowStyle  CssClass ="altrowstyle"   />
     < HeaderStyle  CssClass ="headerstyle"   />
     < RowStyle  CssClass ="rowstyle"   />
     < Columns >
         < asp:BoundField  HeaderText ="ID"  DataField ="customerid"  SortExpression ="customerid"   />
         < asp:BoundField  HeaderText ="Company"  DataField ="companyname"  SortExpression ="companyname"   />
         < asp:BoundField  HeaderText ="Contact Name"  DataField ="contactname"  SortExpression ="contactname"   />
         < asp:BoundField  HeaderText ="Contact Title"  DataField ="contacttitle"  SortExpression ="contacttitle"   />
         < asp:BoundField  HeaderText ="Country"  DataField ="country"  SortExpression ="country"   />
         < asp:BoundField  HeaderText ="Phone"  DataField ="phone"  SortExpression ="phone"   />
     </ Columns >
</ asp:GridView >

 处理GridView的 RowDataBound 事件

 在这个方法中,首先要知道当前排序的Cell的索引,一量获得索引,就设置表头的CssClass属性为sortascheader 或 sortdescheader,设置row的CssClass属性为sortaltrow或sortrow

 代码如下:

 

protected   void  GvCustomers_RowDataBound( object  sender, GridViewRowEventArgs e)
... {
    GridView gridView = (GridView)sender;

    if (gridView.SortExpression.Length > 0)
    ...{
        int cellIndex = -1;
        //  find the column index for the sorresponding sort expression
        foreach (DataControlField field in gridView.Columns)
        ...{
            if (field.SortExpression == gridView.SortExpression)
            ...{
                cellIndex = gridView.Columns.IndexOf(field);
                break;
            }
        }

        if (cellIndex > -1)
        ...{
            if (e.Row.RowType == DataControlRowType.Header)
            ...{
                //  this is a header row,
                //  set the sort style
                e.Row.Cells[cellIndex].CssClass +=
                    (gridView.SortDirection == SortDirection.Ascending
                    ? " sortascheader" : " sortdescheader");  
            }
            else if (e.Row.RowType == DataControlRowType.DataRow)
            ...{
                //  this is a data row
                e.Row.Cells[cellIndex].CssClass +=
                    (e.Row.RowIndex % 2 == 0
                    ? " sortaltrow" : "sortrow");
            }
        }
    }            
}

最后将下面的CSS加到页面中:

<link  type="text/css" rel=Stylesheet  href=StyleSheet.css />

 

.tablestyle 
{
    font-family :  arial ;
    font-size :  small ;
    border :  solid 1px #7f7f7f ;
}

.altrowstyle 
{
    background-color :  #edf5ff ;
}

.headerstyle th 
{
    background :  url(img/sprite.png) repeat-x 0px 0px ;
    border-color :  #989898 #cbcbcb #989898 #989898 ;
    border-style :  solid solid solid none ;
    border-width :  1px 1px 1px medium ;
    color :  #000 ;
    padding :  4px 5px 4px 10px ;
    text-align :  center ;
    vertical-align :  bottom ;
}   

.headerstyle th a
{
    font-weight :  normal ;
    text-decoration :  none ;
    text-align :  center ;
    color :  #000 ;
    display :  block ;
    padding-right :  10px ;
}     

.rowstyle .sortaltrow, .altrowstyle .sortaltrow 
{
    background-color :  #edf5ff ;
}

.rowstyle .sortrow, .altrowstyle .sortrow 
{
    background-color :  #dbeaff ;
}

.rowstyle td, .altrowstyle td 
{
    padding :  4px 10px 4px 10px ;
    border-right :  solid 1px #cbcbcb ;
}

.headerstyle .sortascheader 
{
    background :  url(img/sprite.png) repeat-x 0px -100px ;
}

.headerstyle .sortascheader a 
{
    background :  url(img/dt-arrow-up.png) no-repeat right 50% ;
}  

.headerstyle .sortdescheader 
{
    background :  url(img/sprite.png) repeat-x 0px -100px ;
}    

.headerstyle .sortdescheader a 
{
    background :  url(img/dt-arrow-dn.png) no-repeat right 50% ;
}  

 

 转自:http://mattberseth.com/blog/2007/10/a_yui_datatable_styled_gridvie.html