基于jQuery mobile中动态部分的动态可折叠集合内容 [英] Dynamic collapsible set content based on dynamic section in jQuery mobile

问题描述

我有一个看起来像的json

I have a json it look like

[
{
    "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作为容易设置的位置加载到部分中，而子位置是内容部分.

I want to load this json as colapsible set location into section part and sublocation is content part.

$(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的可折叠集合中，我该怎么做

into collapsible set in jQuery mobile how can I done this

推荐答案

您首先需要遍历 JSON 以创建位置的 Array 通过删除重复项.然后再次循环位置以创建可折叠对象.在遍历位置的同时，遍历 JSON 提取 Sub位置，并将其附加到那里的父母那里.

You need first to loop through JSON to create an Array of the locations by removing duplicates. And then loop again locations to create collapsibles. While looping through locations, go through JSON to extract Sub locations and append them to there parents.

我为每个可折叠添加了位置名称的 class ，以方便附加 Sub位置.

I've added class of location's name for each collapsible to facilitate appending Sub locations.

/* 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');
});

演示

Demo

这篇关于基于jQuery mobile中动态部分的动态可折叠集合内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！