Question

Id喜欢在ag-grid中选择一行时显示其他信息，但到目前为止，它提供的唯一功能是显示组。使用Angular8

基本上希望使用以下功能（忽略编辑和删除按钮）：

当前具有：

comp.ts

...
 this.gridOptions = <GridOptions>{};
        this.gridOptions.defaultColDef = {
            resizable: true,
            filter: true,
            sortable: true,
            enableValue: false,
            enableRowGroup: false,
            enablePivot: false,
            menuTabs: ['filterMenuTab']
        };
        this.gridOptions.rowSelection = 'single';
        this.gridOptions.suppressRowClickSelection = true;


        this.columnDefs = [
            {
                headerName: 'Date',
                field: 'CommencementDate',
                // checkboxSelection: true,
                maxWidth: 160,
                autoHeight: true,
                cellClass: 'kt-valign-top'
            },
            {
                headerName: 'Suite',
                field: 'Suite',
                maxWidth: 160,
                autoHeight: true,
            },
            {
                headerName: 'Tenant',
                field: 'Tenant',
                maxWidth: 160,
                autoHeight: true,
            },
            {
                headerName: 'Leased Area (SF)',
                field: 'LeasedAreaSF',
                maxWidth: 160,
                autoHeight: true,
            },
            {
                headerName: 'Rent $/SF/Year',
                field: 'RentPerSFPerYear',
                maxWidth: 160,
                autoHeight: true,
            },
            {
                headerName: 'Expense Structure',
                field: 'ExpenseStructure',
                maxWidth: 160,
                autoHeight: true,
            },
            {
                headerName: 'Escalations',
                field: 'Escalations',
                maxWidth: 160,
                autoHeight: true,
            },
            {
                headerName: 'Term (Months)',
                field: 'TermMonths',
                maxWidth: 160,
                autoHeight: true,
            },
            {
                headerName: 'Date',
                field: 'CommencementDate',
                maxWidth: 160,
                autoHeight: true,
            },
            {
                headerName: 'External Comments',
                field: 'ExternalComments',
                maxWidth: 160,
                autoHeight: true,
            },

        ];

        this.defaultColDef = {
            resizable: true,
            filter: true,
            sortable: true
        };

        this.sideBar = {
            toolPanels: [
                {
                    id: 'columns',
                    labelDefault: 'Columns',
                    labelKey: 'columns',
                    iconKey: 'columns',
                    toolPanel: 'agColumnsToolPanel',
                    toolPanelParams: {
                        suppressRowGroups: true,
                        suppressValues: true,
                        suppressPivots: true,
                        suppressPivotMode: true,
                        suppressSideButtons: false,
                        suppressColumnFilter: true,
                        suppressColumnSelectAll: false,
                        suppressColumnExpandAll: false
                    }
                }
            ]
        };
        this.frameworkComponents = {
            jobDetailsRenderer: JobDetailsRendererComponent,
            jobDatesRendererComponent: JobDatesRendererComponent,
            jobPropertyRendererComponent: JobPropertyRendererComponent,
            jobParticipantsRendererComponent: JobParticipantsRendererComponent,
            jobPropertyImageRendererComponent: JobPropertyImageRendererComponent
        };

        this.webResColumnDefs = [
            {
                headerName: 'System',
                field: 'system',
                maxWidth: 150,
                sortable: true
            },
            {
                headerName: 'Topic',
                field: 'topic',
                width: 150,
                sortable: true,
                filter: 'agTextColumnFilter',
                cellRenderer: function(params) {
                    //let clientName = params.data.clientName ? params.data.clientName : '';
                    return '<a class="kt-link" target="_blank" href=' + params.data.instructionUrl + '>' + params.data.topic + '</a>';
                    //return clientName + '<br />' + params.data.contactFirstName + params.data.contactLastName + '<br />' + params.data.contactPhone + '<br />' + params.data.contactEmail;
                }
            }
        ];

        this.defaultColDef = {
            resizable: true,
            filter: true,
            sortable: true
        };


    }
    message: MessageService;
    leases: any[];
    propertyId: string;
    property: PropertyCatalogListDto;
    users: UserDto[];

    ngOnInit() {
        this.propertyId = this.route.snapshot.paramMap.get('id');
        this.sessionsUsersService.getAllUsers().subscribe(users => {
            this.users = users;
            this.leases = [];
            this.getLeases();
            console.log(this.leases);
        });
        this.route.data.subscribe((data: PropertyRouteData) => {
            if (!!data.property) {
                this.property = data.property;
            }
        });
    }

    onGridReady(params) {
        params.api.sizeColumnsToFit();
    }
...

ag提供一个复选框，但不提供负号字段 html

...
<div [class]="containerClass + ' kt-grid__item kt-grid__item--fluid'">
                <div class="kt-content">
                    <!-- Page content -->
                    <div class="row">
                        <div class="col-xl-12">
                            <ag-grid-angular style="width: 100%; height: 500px;" class="ag-theme-balham-dark"
                                [rowData]="leases" [columnDefs]="columnDefs" [frameworkComponents]="frameworkComponents"
                                [gridOptions]="gridOptions" [animateRows]="true"
                                [overlayLoadingTemplate]="overlayLoadingTemplate" 
                                [sideBar]="sideBar" (gridReady)="onGridReady($event)">
                            </ag-grid-angular>
                        </div>
                    </div>
                </div>
            </div>
...

css

#AllLeaseView {
    input[type='radio'] {
        display: none;
    }

    .sales-summary-chart {
        svg.ngx-charts {
            margin-left: -35px;
            margin-top: 35px;
        }
    }

    .kt-portlet__head-toolbar .btn-group .btn {
        cursor: pointer;
    }
}
.k-grid tbody td {
    white-space: nowrap;
    line-height: 18px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
    vertical-align: top;
}

.k-grid th.k-header,
.k-grid-header {
    font-size: 14px;
    font-weight: 900;
    padding: 10px 24px;
}

.rag-red {
    background-color: #e74c3c;
    color: black;
}
.rag-green {
    background-color: #00bc8c;
}
.rag-amber {
    background-color: #f39c12;
    color: black;
}

Ag Grid显示更多信息

0 个答案: