1

我有一个看起来像的 json

[
{
    "sid": "1",
    "webform_views_add_sublocation_form_tour_name": "4",
    "webform_views_add_sublocation_form_location": "location1",
    "webform_views_add_sublocation_form_sub_location": "sublocation1"
},
{
    "sid": "2",
    "webform_views_add_sublocation_form_tour_name": "4",
    "webform_views_add_sublocation_form_location": "location2",
    "webform_views_add_sublocation_form_sub_location": "sublocation1"
},
{
    "sid": "3",
    "webform_views_add_sublocation_form_tour_name": "4",
    "webform_views_add_sublocation_form_location": "location1",
    "webform_views_add_sublocation_form_sub_location": "sublocation2"
},
{
    "sid": "4",
    "webform_views_add_sublocation_form_tour_name": "4",
    "webform_views_add_sublocation_form_location": "location1",
    "webform_views_add_sublocation_form_sub_location": "sublocation3"
},
{
    "sid": "5",
    "webform_views_add_sublocation_form_tour_name": "4",
    "webform_views_add_sublocation_form_location": "location2",
    "webform_views_add_sublocation_form_sub_location": "sublocation2"
},
{
    "sid": "8",
    "webform_views_add_sublocation_form_tour_name": "4",
    "webform_views_add_sublocation_form_location": "location1",
    "webform_views_add_sublocation_form_sub_location": "sublocation4"
},
{
    "sid": "10",
    "webform_views_add_sublocation_form_tour_name": "6",
    "webform_views_add_sublocation_form_location": "location2",
    "webform_views_add_sublocation_form_sub_location": "sublocation3"
}]

我想将此 json 作为可折叠集位置加载到部分部分，而子位置是内容部分。

$(document).on('pageshow','#locations' ,function(event, ui){
var tourid = $.urlParam('tourid');
$('#location-list').empty(); 
        $.getJSON('url', function(data) {

            $.each(data,function(i,row){
                 if(tourid == row.webform_submissions_webform_views_add_sublocation_form__webf){
            $('#location-list').append('<div data-role="collapsible"><h3>'+row.webform_submissions_webform_views_add_sublocation_form__webf_1+'</h3><ul data-role="listview"><li><a href="#">'+row.webform_submissions_webform_views_add_sublocation_form__webf_2+'</a></li></ul></div>');
            $('#location-list').collapsibleset('refresh');
                 }
            });
        });
    });

我得到了像

location1
 ---sublocation1
location2
 ---sublocation1
location1
 ---sublocation2
location1
 ---sublocation3
location2
 ---sublocation2

但我需要这样

location1
 --sublocation1
 --sublocation2
 --sublocation2
location2
  --sublocation1
  --sublocation2

进入 jQuery mobile 中的可折叠集我该怎么做

4

1 回答 1

1

您首先需要遍历JSON以通过删除重复项来创建位置数组。然后再次循环位置以创建collapsibles。在遍历位置时，通过JSON提取子位置并将它们附加到父位置。

我为每个可折叠的位置添加了类位置名称，以方便附加子位置。

/* add all locations from JSON */
var collapsible = [];
/* remove duplicate locations */
var locations = [];

$.each(data, function (i, v) {
    collapsible.push(v.webform_views_add_sublocation_form_location);
    $.each(collapsible, function (i, v) {
        if ($.inArray(v, locations) === -1) {
            locations.push(v); /* ["location1", "locations"] */
        }
    });
});

/* loop through locations */
$.each(locations, function (i, loc) {
    var parent = loc;
    var elements = '';

    /* loop through JSON */

    $.each(data, function (x, sub) {
        var subLoc = sub.webform_views_add_sublocation_form_sub_location;
        if (sub.webform_views_add_sublocation_form_location == parent) {
            /* sub locations */
            elements += '<li><a href="#">' + subLoc + '</a></li>';
        }
    });

    /* create collapsibles based on number of locations
       add listview, append sub locations and refresh
       collapsible-set at once */

    $("#location-list").append($("<div/>", {
        "data-role": "collapsible",
            "class": parent
    }).append($("<h3/>").text(parent)).append($("<ul/>", {
        "data-role": "listview",
            "data-theme": "b"
    }).append(elements).listview())).collapsibleset('refresh');
});

演示

于 2014-03-10T13:32:12.707 回答