Как нарисовать таблицу данных, у которой есть список внутри списка?

Question

Итак, я хочу нарисовать таблицу в таблице данных, в которой есть список (список оценок) внутри списка (список учащихся), который я хочу нарисовать, могу ли я это сделать? Если можно, как это сделать?

Объект, подобный:

 public class Student
    {
        public string No{ get; set; }
        public string Name { get; set; }

        public List<Grade_List> list_grade{ get; set; }

    }

    public class Grade_List
    {
        public string grade { get; set; }
        public string in_number{ get; set; }
    }

Код, который я использую для рисования, выглядит так:

$.ajax({
                    url: url,
                    type: 'POST',
                    contentType: 'application/json; charset=utf-8',
                    data: JSON.stringify(DataQuery),
                    success: function (response) {
                        var total = 0;
                        $prodData.clear();
                        response.forEach(function (element, index) {
                            let No = index + 1;
                            //add object as a new table row
                            $prodData.row.add({
                                "No": No,
                                "Name": element.name,
                                "Grade": element.grade,
                                "In Number": element.in_number,

                            });
                        });
                        $prodData.draw(false);
                        alert("Success : Data has been loaded.");
                    }
                });
                });

Я использовал этот код для всей таблицы, котораяУ меня нет списка внутри списка, но я не знаю, как это сделать, если у меня есть список внутри списка.

Таблица, которую я хочу получить, выглядит следующим образом:

No | Name | Grade | In Number
 1 | Ralph|   A   |    9
   |      |   C   |    6
   |      |   A   |    8
 2 | Andy |   B   |    7
   |      |   B   |    7
   |      |   A   |    8

СпасибоВы.

Answer 1

Добавление к Ответа Transcendent , если вы просто хотите просмотреть все элементы списка внутри другого списка, самый простой способ сделать это - просто добавить еще один цикл forEach внутри первого forLoop:

    response.forEach(function (element, index) {
        let No = index + 1;
        element.list_grade.forEach(function (grade, new_index) {
            // GET GRADE VALUE LIKE THIS -> grade.grade
            // GET IN_NUMBER VALUE LIKE THIS -> grade.in_number
        }

        $prodData.row.add({
        ...
        });
    });

Answer 2

Если вы хотите иметь расширяемую строку в вашей таблице, вы можете взглянуть на этот пример .Однако вот более подробная версия этого примера.Предполагая, что вы хотите отобразить информацию путем расширения строки, вы должны сначала создать внутреннюю таблицу (или аналогичный шаблон, который будет отображаться при развертывании строки).

Следующий код показывает, как вы можете сделать это в JavaScript:

function format ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Full name:</td>'+
            '<td>'+d.name+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extension number:</td>'+
            '<td>'+d.extn+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extra info:</td>'+
            '<td>And any further details here (images etc)...</td>'+
        '</tr>'+
    '</table>';
}

Имейте в виду, что вместо объединения строк, как показано в этом коде, вы можете упростить его с помощью ` символ вместо ' и используйте технику $ для визуализации вашего шаблона.Однако после того, как вы определили функцию, которая отображает вашу внутреннюю таблицу, вы можете привязать ее к столбцу в вашей таблице, чтобы при щелчке по ней пользователь расширялся.

Поскольку вам нужно украсить соответствующий столбец таким образом, чтобы его можно было просто найти, чтобы щелкнуть по нему, чтобы развернуть строку, вы должны сначала создать класс CSS, а затем связать его с одним из столбцов втвой стол.

var table = $('#example').DataTable( {
    "ajax": "../ajax/data/objects.txt",
    "columns": [
        {
            "className":      'details-control',
            "orderable":      false,
            "data":           null,
            "defaultContent": ''
        },
        { "data": "name" },
        { "data": "position" },
        { "data": "office" },
        { "data": "salary" }
    ],
    "order": [[1, 'asc']]
} );

Класс details-control является примером того, о чем я здесь говорю.После этого шага вы можете привязать событие к этому классу, чтобы ответить на действие пользователя.

$('#example tbody').on('click', 'td.details-control', function () {
    var tr = $(this).closest('tr');
    var row = table.row( tr );

    if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        // Open this row
        row.child( format(row.data()) ).show();
        tr.addClass('shown');
    }
} 

Имейте в виду, что вам нужны JQuery DataTables для реализации расширяемой строки таким способом.