列表的自动解决方案

我正在创建一些项目，包括名和姓。该列表按姓氏排序。你如何创建将按姓氏划分列表项的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

列表的自动解决方案

回答

相关问题