devexpress - 向 DevExtreme DataGrid 添加多层主从细节

Question

我试图将多层 Master/Detail 流添加到 DevExtreme DataGrid 中。

Master/Detail 部分应该是动态创建的。

这是我到目前为止所做的：

const buildrid = function (resourceId, gridData, gridFields, masterDetailResult) {
    let MasterDetailDataSource;
    let MasterDetailDataSourceColumns = [];
    let haveDetail = false;
   
    if (masterDetailResult != null && masterDetailResult.providerResult != null &&
        masterDetailResult.MasterDetailsInfo != null && masterDetailResult.providerResult.length > 0) {
        MasterDetailDataSource = masterDetailResult.providerResult;
        haveDetail = true;

        
        (Object.keys(MasterDetailDataSource[0])).forEach(function (item, index) {
            console.log(item, index);
            var columns_value;
            columns_value = {
                dataField: item,
            };
            MasterDetailDataSourceColumns.push(columns_value);

        });

    }
 
    var $target = $('#resource_' + resourceId + ' .resource-grid-preview');
    $target.dxDataGrid({
        dataSource: gridData,
        allowColumnResizing: true,
        columnResizingMode: 'nextColumn',
        rowAlternationEnabled: true,
        rtlEnabled: pageDir('rtl'),
        showBorders: true,
        showColumnLines: true,
        showRowLines: true,
        width: "100%",
        height: function () {
            return $target.parents('.modal-body').height() - 92;
        },
        wordWrapEnabled: true,
        allowColumnReordering: true,
        allowColumnResizing: true,
        columnAutoWidth: true,
        scrolling: {
            showScrollbar: "always",
        },
        selection: {
            mode: "multiple"
        },
        filterRow: {
            visible: true,
            applyFilter: "auto"
        },
        hoverStateEnabled: true,

        paging: {
            pageSize: 10
        },
        pager: {
            showNavigationButtons: true,
            showPageSizeSelector: true,
            allowedPageSizes: [5, 10, 20, 50],
            showInfo: true
        },

        onContentReady: function () {
            $target.find('.dx-pages').addClass('pull-right');
            $target.find('dx-info').addClass('rtl');
            $target.find('.dx-page-sizes').addClass('pull-left');
        },
        columns: [],
        onOptionChanged: function ({ name, element, component }) {
            if (name === 'dataSource') {
                component.option('height', element.parents('.modal-body').height() - 92);
            }
        },
            masterDetail: {
             enabled: haveDetail,
                template(container, options) {
                    let ArrayMasterDetailsInfo = [];
                    let key, keys = Object.keys(options.data);
                    let n = keys.length;
                    let newobj = {}
                    while (n--) {
                        key = keys[n];
                        newobj[key.toLowerCase()] = options.data[key];
                    }
                    if (masterDetailResult.MasterDetailsInfo.length > 0) {
                        for (let i = 0; i < masterDetailResult.MasterDetailsInfo.length; i++) {
                            //debugger;
                            let tempArrayMasterDetailsInfo = [];
                            tempArrayMasterDetailsInfo.push(masterDetailResult.MasterDetailsInfo[i].MasterFieldName);
                            tempArrayMasterDetailsInfo.push('=');
                            tempArrayMasterDetailsInfo.push(newobj[masterDetailResult.MasterDetailsInfo[i].DetailFieldName.toLowerCase()]);
                            ArrayMasterDetailsInfo.push(tempArrayMasterDetailsInfo);
                        }
                    }
                $('<div>')
                    .dxDataGrid({
                        columnAutoWidth: true,
                        showBorders: true,
                        columns: MasterDetailDataSourceColumns,
                        dataSource: new DevExpress.data.DataSource({
                            store: new DevExpress.data.ArrayStore({
                                data: MasterDetailDataSource,
                                key: "Id",
                            }),
                            filter: ArrayMasterDetailsInfo
                        })
                    }).appendTo(container);
            },
        },
    });
}

主 Gridview 的数据源来自gridData，主/详细数据源使用masterDetailResult.providerResult。最良好的问候