使用来自 JSON 数据的嵌套列表视图动态创建可折叠元素答案

【问题标题】：Create collapsible elements dynamically with nested listview from JSON data使用来自 JSON 数据的嵌套列表视图动态创建可折叠元素
【发布时间】：2014-03-14 23:52:46
【问题描述】：

我正在尝试创建一个包含列表视图的可折叠元素列表。这是我正在使用的 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;
}

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

【问题讨论】：

$("#menu-content").empty() 在添加更多项目之前，因为您使用的是pageshow。每当显示页面时，都会添加项目。或者，使用pageinit 或pagecreate 仅附加一次项目。
如果我使用页面创建并使用 $.mobile.pagechange 进入菜单页面，则由于某种原因元素不会出现在其上。只有当我显示页面时它才有效
你用的是哪个版本？
这是1.4.0 jquery移动版
检查这个 Angular 指令 mohsenweb.com/json-formatter/dist

标签： javascript jquery json jquery-mobile cordova

【解决方案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

【讨论】：