Arhn - архитектура программирования

Динамический складной набор контента на основе динамического раздела в jQuery mobile

У меня есть 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, как я могу это сделать

jquery-mobile jquery-mobile-collapsible
10.03.2014

  • свойства объекта в JSON не соответствуют свойствам в цикле $.each(). webform_views_add_sublocation_form_location и webform_submissions_webform_views_add_sublocation_form__webf_2. Есть ли еще код для размещения здесь? 10.03.2014
  • @Omar обновил мой код 10.03.2014
  • возможно, я работаю над этим. 10.03.2014
  • @ Омар, хорошо. Я тоже пытаюсь 10.03.2014

Ответы:


1

Сначала вам нужно пройти через JSON, чтобы создать массив из местоположений, удалив дубликаты. Затем снова выполните цикл местоположения, чтобы создать складные элементы. Перебирая местоположения, пройдите через 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');
});

Демо

10.03.2014
  • Спасибо .. Работает как прелесть ... :) 10.03.2014
  • @ SKM17, пожалуйста :) Я использовал jQM 1.4.2, кстати. Если вы используете более раннюю версию, требуется другой способ повторного улучшения элементов. 10.03.2014
  • Я также использую JQM 1.4.2 11.03.2014
    • Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..