自动分频器列表 [英] Autodividers for list

问题描述

我正在创建包含姓氏和名字的项目.该列表按姓氏排序.如何创建自动分隔符，以按姓氏划分列表项?

I am creating a lits of items including first and last names. The list is sorted by last name. How do you create autodividers that will dividing the list items by last name?

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

推荐答案

要为自动分隔符使用自定义文本，您需要做一些事情.

There are a few things you need to do to use a custom text for the autodividers.

• 您需要将data-autodividers="true"添加到ul
• 您需要指定一个autodividersSelector函数来输出 自动分隔符的文字
• 您需要刷新列表视图

• You need to add data-autodividers="true" to the ul
• You need to specify a autodividersSelector function that outputs the text for the autodivider
• You need to refresh the listview

例如，考虑到以下标记的简化版本

For example given the following simplified version of your markup

  <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使用姓氏创建自动分隔线

You can use the following JavaScript to create autodividers using the lastname

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

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

以下是 jsBin 的链接(使用了一些标记)

Here's a link to a jsBin (using a little more of your markup)

这篇关于自动分频器列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！