c# - asp.net ListViewソート矢印

Question

リスト ビューのヘッダーに 1 つの矢印イメージ (上または下) を追加して、クリックすると列が昇順/降順で並べ替えられるようにするにはどうすればよいですか?

現在、並べ替えを行うリンクがあります。

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

Answer 1

それを行うには多くの方法があります。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>

サーバー側でそれを行う別の方法。Command Sort のソート状態に応じて、コントロールを追加し、ImageUrl プロパティを変更できます。

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

コードビハインド

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

// and so on

この画像をリストビューのレイアウト テンプレートに追加します。