如何在 ListView 中使用 class 对项目进行排序？

Question

I have a ListView . Inside that I am using <table> as item template. I want to sort the items using <td> class name.

How can I do that? And this should work on button click.

<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

I would use DataGrid or DataGridView. It has sorting mechanisms already built in.

Answer 2

Why not to use OnItemCommand:

Keep LinkButton in the ListView's Table:

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

Find LinkButton Click event in OnItemCommand:

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

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

Answer 3

Take look at this jQuery sorting function . It should be pretty easy to implement with your code.

Here's the 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));
        });

    };

})();

And the implementation should look something like this:

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