如何绘制列表中包含列表的数据表？

Posted 2021-03-27

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

对象如下：

 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

谢谢。

答案

如果你想在你的桌子上有一个可扩展的行，你可以看看这个example。但是，这是thatexample的更详细版本。假设您要通过展开行来显示信息，您应该首先创建一个内部表（或者在展开行时显示的类似模板）。

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

另一答案

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

    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({
        ...
        });
    });