如何创建具有多个子行(嵌套表)的jQuery数据表? [英] How to create jQuery datatable with multiple child rows(nested table)?

问题描述

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

Question: I need to create a table with a nested table format. When a user clicks plus button it should show the nested table. If they click minus button it should hide.

我已经完成了jquery datatable的正常工作.但我无法为子表显示多行.我已经尝试了很多次，无法显示正确的格式.

I have done jquery datatable its working fine. but I'm not able to display multiple rows for child table. I have tried so many times I'm not able to display proper format.

这是我引用的用于创建表的链接 https://datatables.net/examples/api/row_details.html

This is the link I have referred to create a table https://datatables.net/examples/api/row_details.html

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

Database: Actual data coming from the database as per the below format and I have converted JSON format to display :

C#代码:

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

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

I need an output like this with a nested table:

用户界面代码:

/* 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

Technology used: ASP.Net MVC5

通过其他任何方式，我都可以使用linq或修改JSON数据格式.

Any other way I'm ready to use either linq or modify JSON data format.

推荐答案

您可以像这样将ID赋予子表

You can give Id to your child table like this

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>';
}

并执行与父表相同的操作

and do the same thing which you did for your parent table

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

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

将您的json对象绑定到列"部分.

bind your json object in columns section.

这篇关于如何创建具有多个子行(嵌套表)的jQuery数据表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！