Question

我有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;
    }
}

Answer 1

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

Answer 2

为什么不使用OnItemCommand：

将LinkButton保留在ListView的表中：

<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中找到LinkButton Click事件：

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

        if (e.CommandName.Equals("RegionName"))
        {
            // sorting code
        }
    }

Answer 3

看看这个jQuery sorting function。用你的代码实现它应该很容易。

这是功能：

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;
});

如何使用ListView中的类对项目进行排序？

3 个答案: