将默认排序箭头添加到 GridView

Question

我是 Asp.net 的新手，目前正在使用 GridViews。我浏览了这个网站，其他人也看到了如何将排序箭头添加到列标题的提示。

到目前为止，我已经这样做了：

设置这些 GridView 属性：

SortedAscendingHeaderStyle-CssClass="sortasc"
SortedDescendingHeaderStyle-CssClass="sortdesc"

我的 css 有这个：

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

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

这非常适合在用户单击标题和列排序后显示图像。

我现在遇到的问题是，我希望这些列默认显示图像，以便用户知道他们可以单击它们进行排序。有没有办法做到这一点？

Answer 1

您可以在RowCreated 事件中显示gridview 列的排序行为的箭头，类似这样我通常这样做

protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.Header)
    {
        foreach (TableCell tc in e.Row.Cells)
        {
            if (tc.HasControls())
            {
                // search for the header link
                LinkButton lnk = (LinkButton)tc.Controls[0];
                if (lnk != null && GridView1.SortExpression == lnk.CommandArgument)
                {
                    // inizialize a new image
                    System.Web.UI.WebControls.Image img = new System.Web.UI.WebControls.Image();
                    // setting the dynamically URL of the image
                    img.ImageUrl = "~/img/ico_" + (GridView1.SortDirection == SortDirection.Ascending ? "asc" : "desc") + ".gif";
                    // adding a space and the image to the header link
                    tc.Controls.Add(new LiteralControl(" "));
                    tc.Controls.Add(img);

                }
            }
        }
    }
}

它还可以在列的升序和降序排序上切换图像

代码实际上做了什么 循环遍历 GridView Header 以搜索 LinkButton （仅当设置了 SortExpression 属性时，框架才会创建它）。然后，如果找到的LinkButton 是排序字段，那么它将图像显示到输出，仅此而已

AnswerSource

Answer 2

我使用了以下方法...与接受的答案相同，但使用字符而不是图像。分享以防万一。

protected void GrdOverview_RowCreated(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.Header)
    {
        foreach (TableCell tc in e.Row.Cells)
        {
            if (tc.HasControls())
            {
                // search for the header link
                LinkButton lnk = (LinkButton)tc.Controls[0];

                string sortDir = ViewState["SortDirection"] != null ? ViewState["SortDirection"].ToString() : "ASC";
                string sortBy = ViewState["SortExpression"] != null ? ViewState["SortExpression"].ToString() : "---";

                if (lnk != null && sortBy == lnk.CommandArgument)
                {
                    string sortArrow = sortDir == "ASC" ? " ▲" : " ▼";
                    lnk.Text += sortArrow;
                }
            }
        }
    }
}

Answer 3

来自您的问题：“默认显示图像，以便用户知道他们可以点击它们进行排序。” 将HeaderStyle-CssClass 属性添加到您的gridview，并将默认样式放在该属性中：

<asp:GridView ID="GridView1" runat="server"
                        AutoGenerateColumns="False"
                        AllowSorting="True"
                        OnSorting="GridView1_Sorting"
                        HeaderStyle-CssClass ="headRowSortable">

...并使用您的上下排序图标添加相应的 CSS：

.headRowSortable > th > a {
        display: inline-block;
        padding-left: 15px;
        background: url('../Images/up-down-sort.png') left center no-repeat;
        background-size: contain;
        text-decoration: none;
        vertical-align: central;
    }

只要您使用<asp:SQLDataSource>...，我猜您就是这样。

一旦您开始在代码中将 DataGrid 绑定到数据源，GridView 将停止应用 SortedAscendingHeaderStyle 和 SortedDescendingHeaderStyle，因为它不知道哪一列以哪种方式排序。

因此，如果您自己进行数据绑定，则需要在GridView_Sorting 事件期间更改列上的类：

protected void GridView1_Sorting(object sender, GridViewSortEventArgs e)
        {
            //get the index of the column we sorted.
            int iSortedColIdx = 0;
            foreach (DataControlField c in GridView1.Columns)
            {
                if (c.SortExpression == e.SortExpression)
                    break;
                iSortedColIdx++;
            }

            string sSortDirection = "";
            if ((string)ViewState["SortColumn"] == e.SortExpression)
                sSortDirection = ((string)ViewState["SortDirection"] == "") ? " DESC" : "";
            else
                ViewState["SortColumn"] = e.SortExpression;

            ViewState["SortDirection"] = sSortDirection;


            DataTable oDT = (DataTable)ViewState["MyDataSource"];
            if (oDT.Rows.Count > 0)
            {
                string sSortString = e.SortExpression + sSortDirection;
                oDT.DefaultView.Sort = sSortString;

                GridView1.DataSource = oDT;
                GridView1.DataBind();

                // SET THE HEADER CSSCLASS AFTER THE DATA BIND. IT'LL GET CLEARED ON DATA BIND.
                GridView1.HeaderRow.Cells[iSortedColIdx].CssClass = sSortDirection == "" ? "headRowSortAsc" : "headRowSortDesc";
            }

        }

...以及相应的css：

th.headRowSortAsc a {
    display: inline-block;
    padding-left: 15px;
    background: url("../Images/down-sort.png") no-repeat;
    background-size: 15px;
    background-size: contain;
    text-decoration: none;
    vertical-align: central;
}

th.headRowSortDesc a {
    display: inline-block;
    padding-left: 15px;
    background: url("../Images/up-sort.png") no-repeat;
    background-size: 15px;
    background-size: contain;
    text-decoration: none;
    vertical-align: central;
}