Question

在我的MVC项目中，我尝试使用单个Datatable并折叠详细数据的行，如Creating an expandable master-details table (jQuery DataTables and ASP.NET MVC integration - Part IV)所示。另一方面，我正在为jQuery Datatable寻找master-detail ASP.NET MVC关系的类似示例，但遗憾的是，我在网上至少有50页没有其他合适的示例或教程。是否有像that这样的类似例子？提前谢谢......

Answer 1

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

Answer 2

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

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

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 3

我知道这是一个旧线程。但是从那以后我找不到任何好的例子。我创建了一个工作示例，该示例可以使用jQuery（3.5.0）和Datatables（1.10.19）进行完全扩展。表，列，行和子表是根据数据结构动态创建的。

您可以在此处找到演示和代码-https://banglaonline.org/dashboard/temp/dt.html。 js代码位于https://banglaonline.org/dashboard/temp/dt.js中。

function dataStructure（）-创建第一个表

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

}

函数drillTblDataStructure-控制嵌套表的扩展和收缩


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++;
    }
}

函数formatTblDataStructure-由以上两个函数用于创建数据表的表结构和定义

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];
}

在示例中，数据是通过ajax从php后端作为json检索的。 json响应示例：

{

"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" }

]

}

如何创建jQuery Datatable Drill-down行？

3 个答案: