问题:我需要创建一个具有嵌套表格式的表。当用户单击加号按钮时,它应该显示嵌套表。如果他们点击减号按钮,它应该隐藏。
我已经完成了jquery datatable,它工作正常。但我无法显示子表的多行。我已经尝试了很多次,但无法显示正确的格式。
这是我提到的创建表的链接https://datatables.net/examples/api/row_details.html https://datatables.net/examples/api/row_details.html
Database:
Actual data coming from the database as per the below format and I have converted JSON format to display :
![enter image description here](https://i.stack.imgur.com/teItL.png)
C# Code:
return new JsonResult { Data = new { data = test }, JsonRequestBehavior =
JsonRequestBehavior.AllowGet };
I need an output like this with a nested table:
![enter image description here](https://i.stack.imgur.com/PtBwV.png)
UI CODE:
/* 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":"[email protected] /cdn-cgi/l/email-protection","CityName":"Chennai","Permission":"Manager,LocalUser"},
{"UserId":"ABC","UserName":"Peter","Email":"[email protected] /cdn-cgi/l/email-protection","CityName":"Bangalore","Permission":"Admin,LocalUser"},
{"UserId":"xyz","UserName":"Haiyan","Email":"[email protected] /cdn-cgi/l/email-protection","CityName":"Bangalore","Permission":"LocalUser"},
{"UserId":"xyz","UserName":"Haiyan","Email":"[email protected] /cdn-cgi/l/email-protection","CityName":"Chennai","Permission":"LocalUser,Manager"}]}
使用技术:ASP.Net MVC5
我准备使用 linq 或修改 JSON 数据格式的任何其他方式。