列表的自動解決方案

我正在創建一些項目，包括名和姓。該列表按姓氏排序。你如何創建將按姓氏劃分列表項的autodividers？列表的自動解決方案

<div class="listWrap"> 
    <div id="userFilter"> 
     <ul id="usersListView" data-bind="template: {name: 'usersListTemplate', foreach: users}" data-role="listview" data-filter="false" data-filter-placeholder="enter a colleague's name..."> 
     </ul> 
    </div> 
    <script id="usersListTemplate" type="text/html"> 
     <li data-theme="h" data-bind="click: $parent.UserInfo" class="clickableRow"> 
      <table> 
       <tr class="colleague"> 
        <td> 
         <table>       
          <tr><td><span style="font-size:20px" class="firstname_" data-bind="text: firstname"></span>&nbsp;<span style="font-size:20px" data-bind="text: lastname"></span></td></tr> 
          <tr><td><a data-bind="text: email, attr: { href: 'mailto:'+email()}, click: $parent.alwaysTrue, clickBubble: false"></a></td></tr> 
         </table> 
        </td> 
       </tr> 
      </table> 
     </li> 
    </script> 
</div>

來源

2012-11-15 Mike

什麼是「autodividers」 autodividers？ –

@Diodeus http://jquerymobile.com/test/docs/lists/docs-lists.html – Mike

你已經發布的鏈接清楚地表明使用'autodividersSelector'。它不適合你嗎？ –

有你需要做的使用定製文本的autodividers幾件事情。

您需要添加data-autodividers="true"到ul
你需要指定一個autodividersSelector功能輸出爲autodivider
需要刷新列表視圖

例如，給定文本以下簡化版標記

<div data-role="page" id="pageAutoDiv"> 
    <div data-role="header"><h3>Header</h3></div> 
    <div data-role="content"> 
     <ul data-autodividers="true" id="usersListView" data-role="listview"> 
     <li> <span class="firstname_">Francisca </span>&nbsp;<span class="lastname" data-bind="text: lastname">Fidler</span></li> 
     <li><span class="firstname_">Jolie </span>&nbsp;<span class="lastname" data-bind="text: lastname">Jarnagin</span></li> 
     <li><span class="firstname_">Quiana </span>&nbsp;<span class="lastname" data-bind="text: lastname">Quiroz</span></li> 
     </ul>  
    </div> 
    <div data-role="footer"><h4>Footer</h4></div> 
    </div>

您可以使用下面的JavaScript來創建一個使用姓氏

$('#pageAutoDiv').bind('pageshow', function() { 
    $('#usersListView').listview({ 
     autodividers: true, 
     autodividersSelector: function (li) { 
      return $(li).find('.lastname').text(); 
     } 
    }); 

    $('#usersListView').listview('refresh'); 
});

下面是一個jsBin的鏈接（使用多一點的標記）

來源

2012-11-16 15:37:57 Jack

列表的自動解決方案

回答

相關問題