如何创建数据表的jQuery下钻行？如何创建数据表的jQuery下钻行？(How to create

在我的MVC项目，我想使用一个单一的Datatable和折叠详细数据行上所示创建可扩展的主细节表（jQuery的数据表和ASP.NET MVC一体化-第四部分）。在另一方面，我要寻找的类似的例子jQuery Datatable master-detail的关系ASP.NET MVC ，但不幸的是我没有在网络上至少有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 '<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: