asp.net的ListView排序箭头 [英] asp.net ListView sorting arrows
问题描述
如何去增加一个箭头图像（向上或向下），以列表视图的头部，这样当你点击它，它以升序/降序排序列？
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排序箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
