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 

你会这个图像添加到列表视图