可排序的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