如何创建jQuery Datatable Drill-down行？

在我的MVC项目中，我试图使用单个Datatable并折叠详细数据的行，如创建可扩展的主 – 详细信息表（jQuery DataTables和ASP.NET MVC集成 – 第IV部分）所示 。 另一方面，我正在寻找类似的ASP.NET MVC的jQuery Datatable master-detail关系的例子，但遗憾的是我没有来自网上至少50页的另一个合适的样本或教程。 有类似的例子吗？ 提前致谢…

Answer 1

我为其中一个项目做了类似的工作。 我有一个折叠/展开按钮，适用于整个表格，每行都有一个折叠展开图标。 这是我的代码。

注意：我已重命名变量以隐藏我的数据，因此代码可能无法正常工作。

 function populateInstanceTable(tableData){ // Use to determine whether the child rows for all parents should be shown or hidden. var SHOW_ALL_CHILDREN_FLAG = false; var CHILD_DISPLAY_STATE_OVERRIDE = false; var TABLE = $('#table_instance').DataTable( { 'aaData': tableData, 'bProcessing': true, 'aoColumns': [ { 'sTitle': 'Column1', 'mData' : 'col1Data' }, { 'sTitle': 'Column2', 'mData' : 'col2Data' }, { 'sTitle': 'Column3', 'mData': 'col3Data' }, { 'class': 'show-details', 'orderable': false, 'data': null, 'defaultContent': '' } ] } ); function getDetailContent(details) { return '' + '' + ''+ '' + '' + '
More Details:
' + details + '
'; } //This function shows and hides multiple child rows with details, for following conditions // when user clicks '+' or '-' icon // When user uses search // when user changes the number of entries per page // when user navigates through the table // @remark: With exception of expand all and collapse all events, the display state is retained for child rows //that have been previously visited. Visited implies the parent row's show or hide details icon was individually clicked. function collapseOrExpandRows() { var numberOfVisibleParentRows = $('#table_instance tbody tr td.show-details').length; for (var i = 0; i < numberOfVisibleParentRows; i++) { var parentJQRow = $('.show-details').parents('tr').eq(i); var parentDTRow = TABLE.row(parentJQRow); // visited_child helps us retain the state of the child row display while // searching, navigating, sorting or changing number of entries // We always change the state of child if collapse all(- icon) or expand all(+ icon) is clicked. if (parentJQRow.hasClass('visited_child') === false || CHILD_DISPLAY_STATE_OVERRIDE === true) { if (SHOW_ALL_CHILDREN_FLAG === true) { // We are populating a child row with a table because the parent datatable does not support colspan property. parentDTRow.child(getDetailContent(parentDTRow.data().details)).show(); parentJQRow.addClass('shown'); } else { parentDTRow.child.hide(); parentJQRow.removeClass('shown'); } } } } //To display details, this event handler shows or hides a single child row //when the show-details cell is clicked on the parent row $('#table_instance tbody').on('click', 'td.show-details', function() { var parentJQRow = $(this).parents('tr'); var parentDTRow = TABLE.row(parentJQRow); //visited_child helps us retain the state of the child row display while // searching, navigating, sorting or changing number of entries parentJQRow.addClass('visited_child'); if (parentDTRow.child.isShown()) { parentDTRow.child.hide(); parentJQRow.removeClass('shown'); } else { parentDTRow.child(getDetailContent(parentDTRow.data().details)).show(); parentJQRow.addClass('shown'); } CHILD_DISPLAY_STATE_OVERRIDE = false; }); // This event handler retains the state of the child row display // when navigating through the table. $('.dataTables_paginate').on('click', function() { collapseOrExpandRows(); }); // This event handler hides child row for all visible parents. $('.collapseall').on('click', function() { CHILD_DISPLAY_STATE_OVERRIDE = true; SHOW_ALL_CHILDREN_FLAG = false; collapseOrExpandRows(); }); // This event handler shows child row of all visible parents. $('.expandall').on('click', function() { CHILD_DISPLAY_STATE_OVERRIDE = true; SHOW_ALL_CHILDREN_FLAG = true; collapseOrExpandRows(); }); // This event handler retains the state of the child row display // when the user selects the number of entries to display in the table $('div.dataTables_length select').on('change', function() { collapseOrExpandRows(); }); // This event handler retains the state of the child row display // when the user clicks on header to sort $('thead > tr > th', '#table_instance').click(function() { if ($(this).hasClass('show-details') === false) { collapseOrExpandRows(); } }); // This event handler retains the state of the child row display // when the user searches $('div.dataTables_filter input').keyup(function() { collapseOrExpandRows(); }); } 

我已附上截图供您参考。

Answer 2

在Datatables博客上有一个很好的例子，它也有一个很棒的滑动属性。 遗憾的是网上没有关于这个问题的例子，但我希望这个例子对你有用。