Создание динамически сгенерированного аккордеона с начальной загрузкой 4 с помощью вызовов AJAX onclick - PullRequest
Новая
       15

Создание динамически сгенерированного аккордеона с начальной загрузкой 4 с помощью вызовов AJAX onclick

0 голосов
/ 14 мая 2018

Хорошо, так что есть несколько частей того, что я пытаюсь сделать.Мне вернули мои данные JSON, и теперь мне нужно создать аккордеонную таблицу Bootstrap, в которой каждая основная строка содержит четыре «ячейки таблицы» или их эквивалент, но когда я щелкаю по этой строке, я хочу отобразить остальныеинформации в аккордеоне прямо под строкой.Однако я не совсем уверен, как динамически генерировать многорядную аккордеонную таблицу с неизвестным количеством строк, так как это больше о создании таблицы с фактическим тегом <tbody> в отличие от моей последней ужасной попытки этого.Любая помощь здесь?Я видел этот вопрос , но он совершенно не подходил для моих нужд.Вот кое-что, что ПОЧТИ там, но оно должно быть в состоянии использовать правильно выровненные строки таблицы и ячейки в местах, где текст находится в главных строках.

https://codepen.io/Sp00ky/pen/akVkyV

Мне нужнобыть в состоянии иметь хорошо выровненные строки и столбцы ... это должно выглядеть как таблица с раскрывающейся панелью для каждой строки после завершения. 

$(jQuery.parseJSON(JSON.stringify(response))).each(function() {
        var foNum = this['Factory Order#'];
        var pO = this['PO#'];
        var status = this['Status'];
        var shipDate = this['Ship Date'];
        var dat = '{\"username\":' + "\"" + username + "\"}";        
        $.ajax({
            url: BASE_URL + "portal/getdata/orders/" + foNum,
            method: 'POST',
            cors: true,
            data: dat,
            dataType: "json",
            contentType: "application/json",
            success: function (response) {
                $('.orders').append(
                    '<div class="panel panel-default">'+
                        '<div class="panel-heading" role="tab" id="heading_'+index+'">'+
                        '<tr>'+
                            '<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse_'+index+'" aria-expanded="true" aria-controls="collapse_'+index+'">'+
                                '<td>' + foNum + '</td><td>' + pO  + '</td><td>' + status + '</td><td>' + shipDate + '</td>' +
                            '</a>'+
                        '</tr>'+
                        '</div>'+
                        '<div id="collapse_'+index+'" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading_'+index+'">'+
                        '<div class="panel-body">'+
                            'blahblah'+ //PUT DETAILS HERE
                        '</div>'+
                        '</div>'+
                    '</div>'
                );
                index+=1;
            },
            error: function (response) {
                alert("Error: Could not get details.");
            }
        });
    });
...