0

我想填充列表视图中的“数据 jsonp”格式的项目列表。我正在使用 jquery mobile 和 phonegap。我已经尝试了所有可能的方法，但数据不是以列表视图的形式出现，而是以简单的格式出现。我正在使用“jquery.mobile-1.0.1.min.css”和“jquery.mobile-1.0.1.min.js”。请帮忙。

如果有人提供一些工作示例，那就太好了。

谢谢 ..

4

3 回答 3

2

为了以增强的 jQuery 移动格式显示数据，您需要

  1. 将数据以列表格式添加到 DOM 中，并带有一个data-role="listview"属性

    <ul id="listContainer" data-role="listview">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

    （您可以</ul>在 DOM 中已经存在，并在其中添加 JSON 列表中的项目）

  2. 使用 jQuery mobile 增强内容，使用$("#listContainer").listview("refresh");

您可以在此处查看示例

于 2012-12-04T09:33:21.243 回答
1

首先，您应该添加一个列表视图： 

<ul data-role="listview" id="SomeListView" class="tab">
</ul>

然后，通过获取的服务数据填充列表视图：

$.getJSON(globalServiceUrl + "mobile/services/getSomeData.json", function (json) {
    var html = '';

    $.each(json, function (k, v) {
        var item= json[k];
        html += '<li>'+item.Title+'</li>';
    });

    $("#SomeListView").html(html);
    $("#SomeListView").listview('refresh');
 }); // $.getJSON
于 2012-12-04T18:57:47.243 回答
0 
$(document).ready(function(){
$(document).bind('deviceready', function(){
    //Phonegap ready
    onDeviceReady();
});

var output = $('#output');

$.ajax({
    url: 'http://samcroft.co.uk/demos/updated-load-data-into-phonegap/landmarks.php',
    dataType: 'jsonp',
    jsonp: 'jsoncallback',
    timeout: 5000,
    success: function(data, status){
       $.each(data, function(i, item) {
              $('ul').append('<li><h4>' + item.name + '</h4><p>' + item.latitude + '<br>' + item.longitude + '</p></li>');
              });
    },
    error: function(){
       output.text('There was an error loading the data.');
    }
});

});

<body>
    <div>
        <ul data-role="listview" data-filter="false" id="output" >

        </ul>
    </div>
</body>

这是我的代码。

于 2012-12-04T09:58:33.617 回答