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

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

我会用数据网格或DataGridView中。它的排序已经内置机制

Answer 2

为什么不使用OnItemCommand：

保持的LinkBut​​ton在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> 

查找的LinkBut​​ton在OnItemCommand 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; 
});