Question

我正在对网格视图进行排序。排序工作正常。现在我正在尝试在每个标题列旁边添加排序箭头。我几乎尝试了所有方法，但箭头没有显示在我的UI.PFB my代码：

CSS：

th .ascending a {
    background: url(images/ascArrow.gif) no-repeat;
    display: block;
    padding: 0 4px 0 15px;
}

th .descending a {
    background: url(images/descArrow.gif) no-repeat;
    display: block;
    padding: 0 4px 0 15px;
}

代码背后：

protected void RPMData_Sorting(object sender, GridViewSortEventArgs e)
    {
        if (TextData.Text == String.Empty)
        {
            SqlCommand cmd = new SqlCommand("select Customer_Name,Site_Type,Source,Destination,Latency,Jitter_Priority_Real_Time,Jitter_Real_Time,PacketLoss_Priority_Real_Time,PacketLoss_Real_Time,PacketLoss_Other_Classes from RPM", con);
            con.Open();
            SqlDataAdapter da = new SqlDataAdapter(cmd);
            da.Fill(dt1);
            con.Close();
            if (dt1.Rows.Count > 0)
            {
                string sortingDirection = string.Empty;
                if (direction == SortDirection.Ascending)
                {
                    direction = SortDirection.Descending;
                    RPMData.HeaderStyle.CssClass = "descending";
                    sortingDirection = "Desc";
                }
                else
                {
                    direction = SortDirection.Ascending;
                    RPMData.HeaderStyle.CssClass = "ascending";
                    sortingDirection = "Asc";
                }

                DataView sortedView = new DataView(dt1);
                sortedView.Sort = e.SortExpression + " " + sortingDirection;
                Session["SortedView"] = sortedView;
                RPMData.DataSource = sortedView;
                RPMData.DataBind();
            }
        }

//排序逻辑有两个基于应用过滤器的条件。我在这里只添加了第一个条件

GridView标签：

<asp:GridView CssClass="infoTable" ID="RPMData" runat="server" OnSelectedIndexChanged="Button1_Click" AllowPaging="True" PageSize="10" OnPageIndexChanging="RPMData_PageIndexChanging" AllowSorting="True" OnSorting="RPMData_Sorting" AutoGenerateColumns="False" SortedAscendingHeaderStyle-CssClass="ascending" SortedDescendingHeaderStyle-CssClass="descending">
    <HeaderStyle CssClass="ascending" />
        <Columns>

请帮帮我。

Answer 1

HeaderStyle.CssClass应用于enitre标题行<tr class="ascending">，而不是单个th单元格。将您的CSS更改为

<style>
    .ascending a {
        background:url(images/ascArrow.gif) no-repeat;
        display: block;
        padding: 0 4px 0 15px;
    }

    .descending a {
        background:url(images/descArrow.gif) no-repeat;
        display: block;
        padding: 0 4px 0 15px;
    }
</style>

或者如果您在其他地方使用该类，.ascending th a将确保它只影响标题行。

网格视图排序箭头未显示

1 个答案: