Question

我正在尝试使用listview创建一个可折叠元素列表。这是我正在使用的json数据。

[
   {
      "productId":1,
      "name":"Coffee",
      "baseprice":2.00,
      "productoption":[
         {
            "productOptionId":1,
            "topping":"honeymustard",
            "baseprice":0.30
         },
         {
            "productOptionId":2,
            "topping":"barbeque",
            "baseprice":0.50
         },
         {
            "productOptionId":3,
            "topping":"whipcream",
            "baseprice":0.50
         }
      ],
      "productSubOption":[
         {
            "productSubOptionId":1,
            "size":"Small",
            "baseprice":0.50
         },
         {
            "productSubOptionId":2,
            "size":"Medium",
            "baseprice":0.50
         },
         {
            "productSubOptionId":3,
            "size":"Large",
            "baseprice":0.50
         }
      ]
   },
   {
      "productId":2,
      "name":"Burger",
      "baseprice":2.00,
      "productoption":[
         {
            "productOptionId":4,
            "topping":"mayo",
            "baseprice":0.50
         },
         {
            "productOptionId":5,
            "topping":"onion",
            "baseprice":0.50
         }
      ],
      "productSubOption":[
         {
            "productSubOptionId":4,
            "size":"Small",
            "baseprice":0.50
         },
         {
            "productSubOptionId":5,
            "size":"Medium",
            "baseprice":0.50
         }
      ]
   }
]

我这样做是为了创建可折叠列表。但是我的列表视图并未显示可折叠内部。我是jquery的新手，所以不确定是什么问题。我看过很多帖子，但很难搞清楚。

function getMenuForVendor(data,status,jqxhr){
    var list = "";
    var menu = data;
        var menulistitem = createList(menu);

    $(document).on('pageshow','#Menu',function(){
        alert('hi from pageshow');
        $('#menu-content').append(menulistitem);
        $('div[data-role=collapsible]').collapsible();
        $('div ul').trigger('create');
        $.mobile.hidePageLoadingMsg();
    });
}

function createList(menudata){
    var html = [];
    $.each(menudata,function(i,val){
        html.push('<div data-role="collapsible" data-inset="true" data-id='+val.productId+'><h3>'+val.name+'</h3><ul data-role="listview" data-inset="true"></ul>');
        $.each(val.productoption,function(i,val){
            html.push('<li class="row">'+val.topping+'</li>');
        });
        html.push('</div>');
    });
return html;
}

当我按下手机上的后退按钮并再次进入菜单页面时，可折叠的数量会增加（反复附加）。怎么解决？此外，如果我单击collapsible中的列表项，那么我想获得一个带有productSubOptions复选框的新页面。请指导。

Answer 1

在createList而不是数组中，只需构建一个HTML字符串（确保在添加LI之前不要关闭UL）：

function createList(menudata){
    var html = '';
    $.each(menudata,function(i,val){
        html += '<div data-role="collapsible" data-inset="true" data-id='+val.productId+'><h3>'+val.name+'</h3><ul data-role="listview" data-inset="true">';
        $.each(val.productoption,function(i,val){
            html += '<li class="row">'+val.topping+'</li>';
        });
        html += '</ul></div>';
    });
    return html;
}

然后在pagecreate或pageshow中：

var menulistitem = createList(data);
$('#menu-content').empty().append(menulistitem);
$('div[data-role=collapsible]').collapsible();
$('div ul').listview();

这是 DEMO

使用来自JSON数据的嵌套listview动态创建可折叠元素

1 个答案: