时间戳

首页 > 解决方案 > 如何绘制列表内有列表的数据表？

c# - 如何绘制列表内有列表的数据表？

问题描述

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

像这样的对象：

 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

谢谢你。

标签： c#ajaxasp.net-mvcdatatable

解决方案

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

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

推荐阅读