如何创建具有多个子行（嵌套表）的 jQuery 数据表？

Posted 2023-05-07

【中文标题】如何创建具有多个子行（嵌套表）的 jQuery 数据表？

【英文标题】：How to create jQuery datatable with multiple child rows(nested table)?

【发布时间】：2018-11-20 09:27:19

【问题描述】：

问题： 我需要创建一个嵌套表格格式的表格。当用户单击加号按钮时，它应该显示嵌套表。如果他们单击减号按钮，它应该隐藏。

我已经完成了 jquery 数据表，它工作正常。但我无法为子表显示多行。我试了很多次都无法显示正确的格式。

这是我提到的创建表的链接 https://datatables.net/examples/api/row_details.html

数据库： 来自数据库的实际数据按照以下格式，我已将 JSON 格式转换为显示：

C# 代码：

 return new JsonResult  Data = new  data = test , JsonRequestBehavior = 
JsonRequestBehavior.AllowGet ;

我需要一个带有嵌套表的输出：

用户界面代码：

/* Formatting function for row details - modify as you need */
 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>City Name</td>' +
            '<td>Permission</td>' +
        '</tr><tr>' +
            '<td>' + d.City+ '</td>' +
            '<td>' + d.Permission+ '</td>' +
        '</tr>' +
'</table>';


$(document).ready(function() 
var table = $('#example').DataTable( 
    "ajax": "../ajax/data/objects.txt",
    "columns": [
        
            "className":      'details-control',
            "orderable":      false,
            "data":           null,
            "defaultContent": ''
        ,
         "data": "UserName" ,
         "data": "Email" ,
         "data": "UserId" ,

    ],
    "order": [[1, 'asc']]
 );

// Add event listener for opening and closing details
$('#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');
    
   );
  );

JSON 格式：

"data":[
"UserId":"ABC","UserName":"Peter","Email":"[e-mail]","CityName":"Chennai","Permission":"Manager,LocalUser",
"UserId":"ABC","UserName":"Peter","Email":"[e-mail]","CityName":"Bangalore","Permission":"Admin,LocalUser",
"UserId":"xyz","UserName":"Haiyan","Email":"[e-mail]","CityName":"Bangalore","Permission":"LocalUser",
"UserId":"xyz","UserName":"Haiyan","Email":"[e-mail]","CityName":"Chennai","Permission":"LocalUser,Manager"]

使用的技术：ASP.Net MVC5

我准备好使用 linq 或修改 JSON 数据格式的任何其他方式。

【问题讨论】：

或者你可以试试这个jsfiddle.net/headwinds/zz3cH

嗨 Yash，感谢您的快速回复。主要问题是子表循环。我将以 JSON 格式获取数据。如何制作循环？

@YashSoni 这是我得到的格式如何为子表做循环？ "data":[ "UserId":"ABC","UserName":"Peter","Email":"[e-mail]","CityName":"Chennai","Permission":" Manager,LocalUser", "UserId":"ABC","UserName":"Peter","Email":"[e-mail]","CityName":"Bangalore","Permission":" Admin,LocalUser", "UserId":"xyz","UserName":"Haiyan","Email":"[e-mail]","CityName":"Bangalore","Permission":" LocalUser", "UserId":"xyz","UserName":"Haiyan","Email":"[e-mail]","CityName":"Chennai","Permission":"LocalUser,经理"]

在上面的链接中，看第三行，它有嵌套行的例子

【参考方案1】：

您可以像这样将 Id 分配给您的子表

function format ( d ) 
   // `d` is the original data object for the row
  return '<table id="childtable" cellpadding="5" cellspacing="0" border="0" style="padding- 
left:50px;">'+
      '<tr>' +
            '<td>City Name</td>' +
            '<td>Permission</td>' +
        '</tr><tr>' +
            '<td>' + d.City+ '</td>' +
            '<td>' + d.Permission+ '</td>' +
        '</tr>' +
'</table>';

并执行与父表相同的操作

var childTable = $('#childtable').DataTable( 
    "ajax": "../ajax/data/objects.txt",
    "columns": [

    ],
    "order": [[1, 'asc']]
 );

在列部分绑定您的 json 对象。

【讨论】：

嗨@Tech Yogesh。感谢您的回复。我的问题是如何将父表与子表相关联。我想在子表中显示相关的父级详细信息。如果我按照您的步骤操作，关系（链接）在哪里？

是的，同样的问题，父子表链接在哪里？ @SENA 如果对您的问题不满意，您为什么要接受这个答案。