动态嵌套可折叠集基于jquery mobile中的动态部分

时间:2014-03-12 07:01:34

标签: jquery-mobile nested collapsable

我按照answer来创建可折叠集。现在我想创建嵌套的可折叠集。我有一个json喜欢:

[
{
    "sid": "26",
    "tour_name": "4",
    "day": "2",
    "time": "16:00",
    "main_location": "Madurai",
    "sub_location": "Mahal",
    "site_link": "www.maduraimahal.com",
    "description": "test"
},
{
    "sid": "25",
    "tour_name": "4",
    "day": "2",
    "time": "13:00",
    "main_location": "Trichy",
    "sub_location": "Rockport",
    "site_link": "www.rockport.com",
    "description": "Test"
},
{
    "sid": "24",
    "tour_name": "4",
    "day": "2",
    "time": "12:00",
    "main_location": "Madurai",
    "sub_location": "Temple",
    "site_link": "www.madurai.com",
    "description": "Test "
},
{
    "sid": "17",
    "tour_name": "4",
    "day": "1",
    "time": "09:00",
    "main_location": "Chennai",
    "sub_location": "City Centre",
    "site_link": "www.wikipedia.com",
    "description": "test"
},
{
    "sid": "16",
    "tour_name": "4",
    "day": "1",
    "time": "08:00",
    "main_location": "Chennai",
    "sub_location": "Spencer Plaza",
    "site_link": "www.spencer.com",
    "description": "test"
},
{
    "sid": "15",
    "tour_name": "4",
    "day": "1",
    "time": "07:00",
    "main_location": "Chennai",
    "sub_location": "Express Avenue",
    "site_link": "www.wikipedia.com",
    "description": "test"
}]

从这个json我想创建类似于以下类型的可折叠集

   day-->First collapsiple 
      ---main_location-- >second collapsiple 
        ---sublocation-->listview

〔实施例

 day 1
   --Chennai
     ---expressavenue
     ---Spencer Plaza
     ---City Centre

 day 2
   --Trichy
     ---Rockfort

   -- Madurai
     ---Mahal
     ---Temple

我正在尝试以下方法但不能像这样分组

$(document).on('pageshow', '#itienary', function (event, ui) {
    $.getJSON('url', function (data) {
        var collapsible = [];
        var days = [];
        var collapsible1 = [];
        var mainlocation = [];

        $.each(data, function (i, v) {

            collapsible.push(v.day);
            $.each(collapsible, function (i, v) {

                if ($.inArray(v, days) === -1) {

                    days.push(v);
                    days.sort();
                }
            });

        });

        $.each(days, function (j, main) {
            var day = main;
            var locations = '';

            $.each(data, function (k, val) {
                var mainloc = val.main_location;

                if (val.day == day) {
                    collapsible1.push(mainloc);
                }
                $.each(collapsible1, function (i, v) {
                    if ($.inArray(v, mainlocation) === -1) {
                        mainlocation.push(v);
                        mainlocation.sort();
                    }
                });
            });

            $.each(mainlocation, function (i, loc) {
                var parent = loc;
                var elements = '';
                $.each(data, function (x, sub) {
                    var subLoc = sub.sub_location;
                    var time = sub.time;
                    var sitelink = sub.site_link;

                    if (sub.main_location == parent) {
                        elements += '<li><h2>' + subLoc + '</h2><p><strong>' + time + '</strong></p><p class="ui-li-aside"><strong>Sitelink: ' + sitelink + '</strong></p></a></li>';
                    }
                });

                $("#itinerary-list").append($("<div/>", {
                    "data-role": "collapsible",
                    "data-iconpos": "left",
                    "data-collapsed-icon": "arrow-d",
                    "data-expanded-icon": "arrow-u",
                    "class": day
                }).append($("<h3/>").text("Day " + day)).appendTo($("<div/>"), {
                    "data-role": "collapsible",
                    "data-iconpos": "left",
                    "class": parent
                }).append($("<h3/>").text(parent)).append($("<ul/>", {
                    "data-role": "listview",
                    "data-theme": "b"
                }).append(elements).listview()));
                $('#itinerary-list').collapsibleset('refresh');
            });
        });
    });
});

我该怎么做?

0 个答案:

没有答案