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

如果要在表中包含可扩展行，可以查看此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来以这种方式实现可扩展行。

Answer 2

添加到Transcendent's answer中，如果您只是想循环遍历另一个列表中的list的所有元素，最简单的方法就是在第一个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({
        ...
        });
    });

如何绘制列表中有列表的数据表？

2 个答案: