Javascript 如何创建jQuery数据表向下钻取行？

在我的MVC项目中，我试图使用一个

Datatable

并折叠行以获取详细数据，如图所示。另一方面，我正在寻找

ASP.NET MVC

的

jQuery Datatable

master detail

关系的类似示例，但不幸的是，我没有从web上至少50页找到另一个合适的示例或教程。有类似的例子吗？提前感谢…

这里有一个很好的例子，说明滑动性能也很好。不幸的是，网上没有太多关于这个问题的例子，但我希望这个例子对你有用

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

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

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();
    });
}

函数populateInstanceTable（tableData）{
//用于确定是显示还是隐藏所有父级的子行。
var SHOW_ALL_CHILDREN_FLAG=false；
var CHILD\u DISPLAY\u STATE\u OVERRIDE=false；
var TABLE=$（'#TABLE_instance'）。数据表(
{
“aaData”：tableData，
“bProcessing”：true，
“aoColumns”：[
{
“缝合线”：“Column1”，
“mData”：“col1Data”
}, 
{
“缝合线”：“第2列”，
“mData”：“col2Data”
},
{
“缝合线”：“Column3”，
“mData”：“col3Data”
},
{
“类”：“显示详细信息”，
“orderable”：false，
“数据”：null，
“defaultContent”：”
}
]
}
);
函数getDetailContent（详细信息）{
返回“”+
'' +
'更多详细信息：'+
''+详细信息+''+
'' +
'';
}
//对于以下情况，此函数显示和隐藏多个子行及其详细信息
//当用户单击“+”或“-”图标时
//当用户使用搜索时
//当用户更改每页的条目数时
//当用户浏览表时
//@备注：除“全部展开”和“全部折叠”事件外，子行保留显示状态
//以前访问过的。已访问表示单独单击父行的“显示或隐藏详细信息”图标。
函数collapseOrExpandRows（）{
var numberOfVisibleParentRows=$（“#表#实例tbody tr td.show details”）.length；
对于（var i=0；ifunction dataStructure(){
    $("#content_structure").html("<div id='content_structure_table' style='width:80%'></div>");
    var groupBy=[fieldOrder[0].field];//level 1 order
    var dtTextColumnIndex=[];
    var dtNumColumnIndex=[];
    var colCount=1;
    var valuefunction=null;//dataCreateValueFunctions();

    tblFormatParam = formatTblDataStructure('tblDataStructure',0,"1=1");
    html = tblFormatParam[0];
    tableDef = tblFormatParam[1];

    $("#content_structure_table").html(html);   
    var table = $('#tblDataStructure').DataTable(tableDef);
    //drill down event
    $('#tblDataStructure tbody').on('click', 'td.details-control', function(){
        e=$(this);
        drillTblDataStructure(e,table,valuefunction);
    });

    $('#tblDataStructure' ).bind( 'xhr.dt', function () {
        var json = table.ajax.json();
        $('#tblDataStructure').unbind( 'xhr.dt');
        //structureChart(json.data);
    });

}

function drillTblDataStructure(td,table,valuefunction) {
    //console.log("td clicked -"+td.attr("datavalue"));
    var tr = td.closest('tr');
    var row = table.row( tr );   
    currentFieldOrder = parseInt(td.attr("fieldorder"));
    //close all other open rows
    tdDrillControls = document.querySelectorAll("td.details-control");
    for (var i=0;i<tdDrillControls.length;i++){
        tdi= $(tdDrillControls[i]);
        tri = tdi.closest("tr");
        r = table.row( tri);
        if (r.child.isShown() && (tdi.attr("datavalue") != td.attr("datavalue"))) {//second condition is importatnt, otherwise the row will be keep on showing

            r.child.hide();
            tri.removeClass('shown');
            tdi.html('<span class="ui-icon ui-icon-plus"></span>')
        }
    }
    if (row.child.isShown()) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
        td.html('<span class="ui-icon ui-icon-plus"></span>')
    }
    else {
        td.html('<span class="ui-icon ui-icon-minus"></span>')  
        childFieldOrder = currentFieldOrder +1;
        var whereClause = td.attr("whereClause")+" and "+td.attr("datacolumn")+" = '"+td.attr("datavalue")+"'"; 
        var childTableID = childFieldOrder*10+iTableCounter;
        tblFormatParam = formatTblDataStructure('tblDataStructure_' + childTableID,childFieldOrder,whereClause);
        html = tblFormatParam[0];
        tableDef = tblFormatParam[1];
        // Open this row
        row.child( html ).show();
        tr.addClass('shown');
        var oInnerTable = $('#tblDataStructure_' + childTableID).DataTable(tableDef);
        $('#tblDataStructure_' + childTableID).bind( 'xhr.dt', function () {//table data is loaded via ajax
            var json = oInnerTable.ajax.json();
            $('#tblDataStructure_' + childTableID).unbind( 'xhr.dt');                                   
        });
        $('#tblDataStructure_' + childTableID +' tbody').on('click', 'td.details-control', function(){
            e=$(this);
            drillTblDataStructure(e,oInnerTable,valuefunction);
        });
        iTableCounter++;
    }
}

function formatTblDataStructure ( table_id, groupOrder, whereClause) {
    var dtTextColumnIndex=[];
    var dtNumColumnIndex=[];
    var colCount=1;
    if(groupOrder<fieldOrder.length-1) //it is not the last item in the order
        var tdColumns=[
            {   className:      'details-control',
                orderable:      false,
                data:           null,
                defaultContent: '<span class="ui-icon ui-icon-plus style="cursor:pointer;"></span>'
            }
        ];
    else
        var tdColumns=[
            {   className:      '',
                orderable:      false,
                data:           null,
                defaultContent: ''
            }
        ];
    tdColumns.push({data:fieldOrder[groupOrder].field});
    html="<table id='"+table_id+"' ><thead><tr><th></th>";
    thtml="<tr><td></td>";

    html+="<th>"+fieldOrder[groupOrder]["dataField"]+"</th>";
    thtml+="<td></td>"
    dtTextColumnIndex.push(colCount);
    colCount++;
    var valuefunction=[];

    for(f in valueFields){//getting field names from json column names
        html+="<th>"+valueFields[f]["dataField"]+"</th>";
        thtml+="<td></td>"
        dtNumColumnIndex.push(colCount);
        colCount++;
        txt = valueFields[f].groupFunction+"("+valueFields[f].field+") as `"+valueFields[f].field+"`";
        valuefunction.push(txt);
        tdColumns.push({data:valueFields[f].field});
    }
    html+="</tr></thead><tbody>"+thtml+"</tr></tbody></table>"; 
    groupBy=[fieldOrder[groupOrder].field]; 
    var tableDef={
        "ajax":{
            url: src,
            data:{
                request:'dataStructure'
                ,dbid:sessionID
                ,group:JSON.stringify(groupBy)
                ,where:whereClause
                ,value:JSON.stringify(valuefunction)
                ,dt:"assoc"
            }
        },
        createdRow: function( row, data, dataIndex ) {
            $( row ).find('td:eq(0)').attr(
                {
                    'fieldOrder': groupOrder,
                    'datavalue': data[fieldOrder[groupOrder].field],
                    'datacolumn': fieldOrder[groupOrder].field,
                    'whereClause': whereClause
                }
            );
        },
        columns: tdColumns,
        columnDefs: [
        {
            targets: dtTextColumnIndex,
            className: 'dt-body-left dt-head-left'
        },
        {
            targets: dtNumColumnIndex,
            className: 'dt-body-right dt-head-right'
            //,"render": function ( data, type, row, meta ) {
            //  return infGroup.format(data);
            //}
        }
      ]
    }
    return [html,tableDef];
}

{

"data": [

{ "dash_uploaded_data_text1": "Dept 1", "dash_uploaded_data_numeric1": "3", "dash_uploaded_data_numeric2": "11" },

{ "dash_uploaded_data_text1": "Dept 4", "dash_uploaded_data_numeric1": "4", "dash_uploaded_data_numeric2": "8" }

]

}