Как создать JQuery Datatable Развертывание строк?

Question

В моем проекте MVC я пытаюсь использовать один Datatable и свернуть строки для подробных данных, как показано на Creating an expandable master-details table (jQuery DataTables and ASP.NET MVC integration - Part IV). С другой стороны, я ищу аналогичные примеры master-detail отношений для ASP.NET MVC, но, к сожалению, у меня нет другого подходящего образца или учебника, по меньшей мере, из 50 страниц в Интернете. Есть ли подобные примеры, например that? Спасибо заранее ...

Answer 1

Я сделал аналогичную работу для одного из проектов. У меня была одна кнопка collapse/expand, которая работает для всей таблицы, и каждая строка имеет один значок разворота. вот мой код.

Примечание: Я переименовал переменные, чтобы скрыть свои данные, чтобы код мог работать не так, как есть.

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 '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' + 
       '<tr>' + 
        '<td style="border:0px;">More Details:</td>'+ 
        '<td style="text-align:left;max-width:100%;border:0px;">' + details + '</td>' + 
       '</tr>' + 
       '</table>'; 
    } 

    //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 Blog, который также обладает прекрасным скользящим свойством. К сожалению, в Интернете не так много примеров в отношении этой проблемы, но я надеюсь, что этот пример полезен для вас.