1

我正在尝试使用 PhoneGap 和 jQuery mobile 创建一个 IOS 应用程序。目标是从 Web 服务接收新闻数据 (json) 并显示它。除了 jquery mobile 的 autodivider 功能外，它都可以正常工作。

JS：

<script>
$(document).on("pageinit", "#news", function(){
    $("#newsContainer ul").listview({
        autodividers: true,
        autodividersSelector: function (li) {
            var out = li.attr("category");
            return out;
        }
    }).listview("refresh");

    getNews(15);

    function getNews(count){
        $.ajax({
            url: '*someURL*/file.php?count='+count,
            dataType: 'jsonp',
            jsonp: 'jsoncallback',
            timeout: 5000,
            success: function(data, status){

                    $.each(data, function(i,item){ 
                        $('#newsContainer ul').append('<li category="'+item.category+'"><a>'+item.image+'<div style="float:left;white-space:normal;">'+item.headline+'</div><div style="float:left">'+item.content+'</div></div style="clear:both"></div></a></li>').listview('refresh');
                    });

                $('#newsContainer ul').listview('refresh');

            },
            error: function(){
                console.log('Fehler bei JSON Verarbeitung');
                $('#newsContainer ul').append('<li>Es ist ein Fehler beim Laden der News aufgetreten</li>').listview('refresh');
            }
        });

    }

});
</script>

HTML：

<div data-role="page" id="news">
    <div data-role="header">
        <h1>News</h1> 
    </div>

    <div data-role="content" id="newsContainer">
        <ul data-role="listview" data-corners="false" data-inset="false" data-theme="a" data-dividertheme="a" data-filter="true" data-sort="true" data-autodividers="true">
        </ul>
    </div>

    <div data-role="footer" class="ui-bar ui-block-a" data-position="fixed" data-id="myFooter">
        <div data-role="navbar">
            <ul>
                <li><a href="#news" data-iconpos="top" data-icon="home">News </a> </li>
                <li><a href="#site2" data-iconpos="top" data-icon="home">Seite2 </a> </li>
            </ul>
        </div>
    </div>
</div>

不幸的是，它不会将所有相等的值合并在一起。我附上了一张图片以更好地展示这个问题。

jquery移动自动分频器问题

4

2 回答 2

1

我想出了这个链接：

http://forum.jquery.com/topic/autodivider-features-group-count

替换代码确实对我有用。

似乎 jquery mobile 不支持对具有相同值的项目进行分组。

于 2013-06-25T13:18:17.543 回答
1

我知道这个问题很老，但由于没有人提供足够的解决方案 - 这是我的尝试。

listview 小部件不会为您对 li 元素进行排序，您需要自己进行。

您可以使用 tsort-plugin 轻松做到这一点：http: //tinysort.sjeiti.com/

var thisView = $('.listview');
$('li',thisView).tsort();
thisView.listview().listview('refresh');
于 2014-04-02T11:46:03.230 回答