如何在列表视图中使用 类对项目进行排序

本文关键字：项目 排序 td 列表 视图 | 更新日期: 2023-09-27 18:30:25

我有一个ListView .在里面，我使用 <table> 作为项目模板。我想使用类名对项目进行排序<td>。

我该怎么做？这应该适用于按钮单击。

<asp:ListView ID="lstvRCGroupSource" runat="server" ViewStateMode="Disabled">
    <LayoutTemplate>
        <ul id="list3" class="conn" style="width: 90%; height: 171px;">
            <asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>
        </ul>
    </LayoutTemplate>
    <ItemTemplate>
        <li class="add" id="l3">
            <table id="tbl" style="width: 100%;">
                <tr class="mytr" style="width: 100%;">
                    <td class="border1" style="width: 50%;"><%# Eval("code") %></td>
                    <td class="border2" style="width: 50%;"><%# Eval("regon_name") %></td>
                </tr>
            </table>
        </li>
    </ItemTemplate>
</asp:ListView>


function sortUnorderedList(ul, sortDescending) {
    if (typeof ul == "string")
        ul = document.getElementById(ul);
    var lis = ul.getElementsByTagName("li");
    var vals = [];
    for (var i = 0, l = lis.length; i < l; i++)
        vals.push(lis[i].innerHTML);
    vals.sort();
    if (sortDescending)
        vals.reverse();
    for (var i = 0, l = lis.length; i < l; i++)
        lis[i].innerHTML = vals[i];
}
window.onload = function () {
    var desc = false;
    document.getElementById("stCodeDSC").onclick = function () {
        sortUnorderedList("list3", desc);
        desc = !desc;
        return false;
    }
}

如何在列表视图中使用 <td> 类对项目进行排序

我会使用DataGrid或DataGridView。它已经内置了排序机制。

为什么不使用 OnItemCommand：

将 LinkButton 保留在列表视图的表中：

<table id="tbl" style="width: 100%;">
            <tr class="mytr" style="width: 100%;">
                <td class="border1" style="width: 50%;">
                    <asp:LinkButton ID="LinkButton1" runat="server"><%# Eval("code") %></asp:LinkButton>
                    </td>
                <td class="border2" style="width: 50%;">
                <asp:LinkButton ID="LinkButton2" runat="server"><%# Eval("regon_name") %></asp:LinkButton>
                </td>
            </tr>
        </table>

在 OnItemCommand 中查找链接按钮单击事件：

protected void ListView1_ItemCommand(object sender, ListViewCommandEventArgs e)
    {
        if (e.CommandName.Equals("Code"))
        {
            // sorting code
        }
        if (e.CommandName.Equals("RegionName"))
        {
            // sorting code
        }
    }

看看这个jQuery排序函数。使用您的代码应该很容易实现。

函数如下：

jQuery.fn.sortElements = (function(){
    var sort = [].sort;
    return function(comparator, getSortable) {
        getSortable = getSortable || function(){return this;};
        var placements = this.map(function(){
            var sortElement = getSortable.call(this),
                parentNode = sortElement.parentNode,
                // Since the element itself will change position, we have
                // to have some way of storing its original position in
                // the DOM. The easiest way is to have a 'flag' node:
                nextSibling = parentNode.insertBefore(
                    document.createTextNode(''),
                    sortElement.nextSibling
                );
            return function() {
                if (parentNode === this) {
                    throw new Error(
                        "You can't sort elements if any one is a descendant of another."
                    );
                }
                // Insert before flag:
                parentNode.insertBefore(this, nextSibling);
                // Remove flag:
                parentNode.removeChild(nextSibling);
            };
        });
        return sort.call(this, comparator).each(function(i){
            placements[i].call(getSortable.call(this));
        });
    };
})();

实现应该看起来像这样：

$("#list3 li td").sortElements(function(a, b){
    return $(a).attr("class") > $(b).attr("class") ? 1 : -1;
});
相关文章：