asp.net的ListView排序箭头

问题描述

如何去增加一个箭头图像（向上或向下），以列表视图的头部，这样当你点击它，它以升序/降序排序列？

How to go about adding one arrow image (up or down) to a list view's header so that when you click on it it sorts the column by ascending/descending order?

目前我只是有一个链接，做排序：

Currently I just have a link that does the sorting:

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

推荐答案

有很多方法可以做到这一点。一种是使用jQuery做客户端上。你可以添加一个跨度或股利或图像，并根据排序状态的jQuery切换了。

解决方案

There are many ways to do it. One is to do it on client side using jquery. You could add a span or div or image and toggle it with jquery depending on the sorting state.

另一种方式来做到这一点在服务器端。您可以添加控制，并根据排序状态的命令排序改变ImageUrl属性。

<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>

Another way to do it on the server side. You could add  control and change ImageUrl property depending on the sort state on Command Sort

后面

code

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

// and so on

您将这个图像添加到列表视图的布局模板

You would add this image to the layout template of the listview

这篇关于asp.net的ListView排序箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！