Question

我有一个工作的角度ui-grid，带有用于扩展网格的html-Template。在这个模板中有另一个ui-grid。如何使子网格也可扩展？第一个可扩展网格工作得很好，第二个（子网）ui网格不可扩展，但有数据）。

如果您需要代码，这里是非工作尝试：

var app = angular.module('app', ['ui.grid', 'ui.grid.expandable']);


app.controller('MyCtrl', [
    '$scope', '$http', '$log', '$templateCache', 'i18nService', '$interval', function($scope, $http, $log, $templateCache,  $interval) {


        $scope.gridOptions = {
            expandableRowTemplate: 'expandableRowTemplate.html',
            expandableRowHeight: 1400,
            expandableRowScope: {subGridVariable: 'subGridScopeVariable'},
            enableFiltering: true,
            treeRowHeaderAlwaysVisible: false,
            columnDefs: [
            { name: 'Col1',field:'Col1', width: '10%'  },
            { name: 'Col2', field: 'Col2'}
                       ],
            onRegisterApi: function(gridApi) {
                $scope.gridApi = gridApi;
                gridApi.expandable.on.rowExpandedStateChanged($scope, function(row) {
                    if (row.isExpanded) {
                        row.entity.subGridOptions = {
                            expandableRowTemplate: 'expandableRowTemplateSubgrid2.html',
                            expandableRowHeight: 700,
                            expandableRowScope: { subGridVariable: 'subsubGridScopeVariable' },
                            columnDefs: [
                                { name: 'SubCol1', field:'SubCol1', width: '10%' },
                                       { name: 'SubCol2', field: 'SubCol2' }
                            ],
                            onRegisterApi: function(subgridAPi) {
                                $scope.subgridAPi = subgridAPi;
                                subgridAPi.expendable.on.rowExpandedStateChanged($scope, function(row) {
                                    if (row.isExpanded) {
                                        row.entity.subsubGridOptions =
                                        {
                                            columnDefs: [
                                                { name: 'Testcol' },
                                                { name: 'TestCol2' }
                                            ]
                                        }
                                    }
                                });
                            }
                        };
                        $http.get('Path to webapi action to retrieve data')
                            .success(function(data) {
                                row.entity.subGridOptions.data = data;
                            });  
                    }

                });
            }
        };

Answer 1

我必须解决同样的问题。以下是TypeScript中的代码：

protected doOnRegisterGridApiCore(gridApi: uiGrid.IGridApi) {
    this.gridApi = gridApi;
    gridApi.expandable.on.rowExpandedStateChanged(null, row => {
        if (row.isExpanded) {
            debugger;
            row.entity.subGridOptions = {
                expandableRowTemplate: defaultExpandableRowTemplate,
                expandableRowScope: row.entity,
                columnDefs: this.gridOptions.columnDefs,
                headerTemplate: '<div></div>',
                footerTemplate: '<div></div>',
                enableHorizontalScrollbar: 0,
                enableVerticalScrollbar: 0,
                onRegisterApi: (gridApi) => { this.doOnRegisterGridApi(gridApi); },
                enableExpandable: true,
                enableExpandableRowHeader: false,
                enableMinHeightCheck: false
            };
            this.treeGridFactory.get(row.entity)
                .then(data => {
                    debugger;
                    row.entity.subGridOptions.data = data.data;
                    row.entity.subGridOptions.gridHeight = 30 * row.entity.subGridOptions.data.length;
                    row.entity.subGridOptions.expandableRowHeight = 30 * row.entity.subGridOptions.data.length;
                    this.gridOptions.expandableRowHeight = 30 * row.entity.subGridOptions.data.length;
                })
                .catch((reason: any) => {
                    this.propagateApiError(reason);
                })
                .finally(() => {
                    this.loaderOff();
                });
        }
    });
};

纠正线条：

expandableRowTemplate: defaultExpandableRowTemplate,
onRegisterApi: (gridApi) => { this.doOnRegisterGridApi(gridApi); },

行模板：

    const defaultExpandableRowTemplate = '<div ui-grid="row.entity.subGridOptions"ui-grid-expandable style="border: 0px!important"></div> ';

将子网格添加到角度ui-grid子网格

1 个答案: