asp.net 列表视图排序箭头

本文关键字：排序 视图 net 列表 asp | 更新日期: 2023-09-27 18:37:09

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

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

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

asp.net 列表视图排序箭头

有很多方法可以做到这一点。一种是使用 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

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

相关文章：