c# - asp.net ListView 排序箭头

Question

如何将一个箭头图像（向上或向下）添加到列表视图的标题中，以便在单击它时按升序/降序对列进行排序？

目前我只有一个进行排序的链接：

<asp:LinkButton runat="server" ID="sortPosition" CommandName="Sort" CommandArgument="Position" >Position</asp:LinkButton>

Answer 1

有很多方法可以做到这一点。一种是使用 jquery 在客户端执行此操作。您可以添加一个跨度或 div 或图像，并根据排序状态使用 jquery 切换它。

<style>
    .sortNotSelected
    {
        background-image: none;
        width: 15px;
        height: 15px;
    }
    .sortAscending
    {
        background-image: url('down.png');
        width: 15px;
        height: 15px;
    }
    .sortDescending
    {
        background-image: url('up.png');
        width: 15px;
        height: 15px;
    }

</style>

<asp:LinkButton runat="server" ID="sortPosition" CommandName="Sort" CommandArgument="Position" OnClientClick="changeSortState();">Position</asp:LinkButton>
<span id="imgSortPosition" class="sortNotSelected"></span>

<script>
    function changeSortState(){
        if ($('#imgSortPosition').attr('class') == 'sortNotSelected'){
            $('#imgSortPosition').removeClass();
            $('#imgSortPosition').addClass('sortAscending');
        }  
        else if ($('#imgSortPosition').attr('class') == 'sortAscending'){
            $('#imgSortPosition').removeClass();
            $('#imgSortPosition').addClass('sortDescending');
        }  
        else 
            $('#imgSortPosition').removeClass();
            $('#imgSortPosition').addClass('sortNotSelected');
        }  

    }
</script>

在服务器端执行此操作的另一种方法。您可以根据命令排序上的排序状态添加控件并更改 ImageUrl 属性

<asp:ImageUrl ID="imgSort" runat="server" />

背后的代码

if (sortAsc)
{
    imgSort.ImageUrl = "up.png";
}

// and so on

您可以将此图像添加到列表视图的布局模板中