如何绘制列表内有列表的数据表？答案

【问题标题】：How to draw data table that have list inside the list?如何绘制列表内有列表的数据表？
【发布时间】：2019-01-04 07:34:07
【问题描述】：

所以我想在数据表中绘制一个表，在我要绘制的列表（学生列表）中有一个列表（成绩列表），我可以这样做吗？如果可以，怎么做?

类似的对象：

 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

谢谢。

【问题讨论】：

您可以展平数据结构以使其更简单，但您实际上可以创建一个两级表，以便在单击一行时该行会展开。您可以查看 JQuery 数据表。

标签： c# ajax asp.net-mvc datatable

【解决方案1】：

如果您想在表格中添加可展开的行，可以查看example。但是，这是该示例的更详细版本。假设您想通过展开一行来显示信息，您应该首先创建一个内表（或当行展开时将显示的类似模板）。

以下代码展示了如何在 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 以这种方式实现可扩展行。

【讨论】：

【解决方案2】：

添加到Transcendent's answer，如果您只想循环遍历另一个列表中的所有列表元素，最简单的方法就是在第一个 forLoop 中添加另一个 forEach 循环：

response.forEach（函数（元素，索引）{ 让否 = 索引 + 1； element.list_grade.forEach(function (grade, new_index) { // 像这样获取等级值 ->grade.grade // 像这样获取 IN_NUMBER 值 ->grade.in_number } $prodData.row.add({ ... }); });

【讨论】：