jQuery Mobile Listview autodividers选项

jQuery Mobile是一款基于HTML5和CSS3的开源JavaScript库，专为移动端设计而生。其中Listview是一种常见的数据展示方式，而autodividers则是Listview提供的一种分组显示内容的选项。

官方文档说明：https://api.jquerymobile.com/listview/#option-autodividers

autodividers选项的作用

当我们需要展示大量数据时，Listview提供的autodividers选项可以自动为数据进行分组，以便于用户查找和浏览。我们只需要按照指定的属性值进行数据排序分组，Listview就可以自动创建分组标题和分隔线。

如何使用autodividers选项

（1）在Listview的HTML结构里，添加data-autodividers="true"属性。

<ul data-role="listview" data-inset="true" data-filter="true" data-autodividers="true">
    <li data-animal="hamster">Hamster</li>
    <li data-animal="lion">Lion</li>
    <li data-animal="seal">Seal</li>
    <li data-animal="monkey">Monkey</li>
    <li data-animal="cat">Cat</li>
    <li data-animal="dog">Dog</li>
    <li data-animal="cow">Cow</li>
</ul>

（2）在数据源中添加用于排序的属性值，用于生成分组标题。

<ul data-role="listview" data-inset="true" data-filter="true" data-autodividers="true">
    <li data-animal="hamster">Hamster</li>
    <li data-animal="lion">Lion</li>
    <li data-animal="seal">Seal</li>
    <li data-animal="monkey">Monkey</li>
    <li data-animal="cat">Cat</li>
    <li data-animal="dog">Dog</li>
    <li data-animal="cow">Cow</li>
</ul>

<script>
    // 设置数据源及排序方式
    var animals = [
        { name: "Hamster", category: 'small pets'},
        { name: "Lion", category: 'wild animals'},
        { name: "Seal", category: 'sea animals'},
        { name: "Monkey", category: 'wild animals'},
        { name: "Cat", category: 'house pets'},
        { name: "Dog", category: 'house pets'},
        { name: "Cow", category: 'farm animals'},
    ];
    animals.sort(function(a,b){
        return a.category > b.category ? 1 : -1;
    });
    // 为每个li添加data-category属性
    $('ul[data-role="listview"] li').each(function(i){
        $(this).attr('data-category', animals[i].category);
    });
</script>

示例1：按字母分组列表

<ul data-role="listview" data-inset="true" data-filter="true" data-autodividers="true">
    <li data-name="Abbey">Abbey</li>
    <li data-name="Alice">Alice</li>
    <li data-name="Amy">Amy</li>
    <li data-name="Barbara">Barbara</li>
    <li data-name="Bob">Bob</li>
    <li data-name="Bruce">Bruce</li>
    <li data-name="Charles">Charles</li>
    <li data-name="Cindi">Cindi</li>
    <li data-name="David">David</li>
    <li data-name="Dean">Dean</li>
    <li data-name="Diana">Diana</li>
    <li data-name="Doug">Doug</li>
    <li data-name="Dylan">Dylan</li>
    <li data-name="Ella">Ella</li>
    <li data-name="Elliot">Elliot</li>
    <li data-name="Emily">Emily</li>
    <li data-name="Emma">Emma</li>
</ul>

<script>
    $('ul[data-role="listview"] li').each(function(){
        $(this).attr('data-letter', $(this).text().substring(0,1));
    });
</script>

示例2：按照首字母ASCII值分组

<ul data-role="listview" data-inset="true" data-filter="true" data-autodividers="true">
    <li data-name="Amsterdam">Amsterdam</li>
    <li data-name="Blowfish">Blowfish</li>
    <li data-name="Coconut">Coconut</li>
    <li data-name="Daikon">Daikon</li>
    <li data-name="Eggplant">Eggplant</li>
    <li data-name="Flounder">Flounder</li>
    <li data-name="Garbanzo">Garbanzo</li>
    <li data-name="Horchata">Horchata</li>
    <li data-name="Ice cream">Ice cream</li>
    <li data-name="Jicama">Jicama</li>
    <li data-name="Kale">Kale</li>
    <li data-name="Lemongrass">Lemongrass</li>
    <li data-name="Mango">Mango</li>
    <li data-name="Nectarine">Nectarine</li>
    <li data-name="Olive">Olive</li>
    <li data-name="Potato">Potato</li>
    <li data-name="Quince">Quince</li>
    <li data-name="Rabbit">Rabbit</li>
    <li data-name="Squash">Squash</li>
    <li data-name="Tomato">Tomato</li>
    <li data-name="Udon">Udon</li>
    <li data-name="Vegetables">Vegetables</li>
    <li data-name="Watermelon">Watermelon</li>
    <li data-name="Xigua">Xigua</li>
    <li data-name="Yams">Yams</li>
    <li data-name="Zucchini">Zucchini</li>
</ul>

<script>
    $('ul[data-role="listview"] li').each(function(){
        $(this).attr('data-charcode', $(this).text().charCodeAt(0));
    });

    $('ul[data-role="listview"]').on('listviewbeforeautodividers', function (event, data) {
        var key = String.fromCharCode(data.text.charAt(0).charCodeAt(0)).toUpperCase();
        if ($.inArray(key, data.autodividers) < 0) {
            data.autodividers.push(key);
            data.dividers.append('<li data-role="list-divider">' + key + '</li>');
        }
    });
</script>