1

我在我的带有 boostrap 4 页面的 Angular 项目中使用核心 ui 模板

<div class="animated fadeIn">
    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header">
                    <button type="button" class="btn btn-sm mr-1 btn-success" data-toggle="modal"
                        routerLink="/branch/branch-edit">Create New</button>
                </div>
           
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-9">
                            <div class="form-group row" id="grid-container">
                                <angular-slickgrid gridId="branchGrid" [columnDefinitions]="columnDefinitions"
                                    [gridOptions]="gridOptions" [dataset]="dataset"
                                    (onAngularGridCreated)="angularGridReady($event)">
                                </angular-slickgrid>
                            </div>
                 </div>
            </div>
        </div>
    </div>
</div>

当我单击导航切换器网格时显示如下。

请让我网格显示在卡之外。请让我知道做错了什么

在此处输入图像描述

编辑：建议我的网格如下所示..对于银行文件管理器选项与网格菜单按钮重叠..请建议

[![在此处输入图像描述][4]][4]

下面的编辑是我的 Ts.file

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

import { AngularGridInstance, Column, GridOption, GraphqlService, GraphqlPaginatedResult, Filters, Formatters, OnEventArgs, FieldType } from 'angular-slickgrid';

import { BankDataService } from 'src/app/core/services/bank-data.service';
import { PageService } from 'src/app/core/services/page.service';


const GRAPHQL_QUERY_DATASET_NAME = 'banks';


@Component({
  templateUrl: './bank-list.component.html',
  styleUrls: ['./bank-list.component.scss']
})
export class BankListComponent implements OnInit {
  angularGrid: AngularGridInstance;
  columnDefinitions: Column[];
  gridOptions: GridOption;
  dataset = [];

  constructor(private dataService: BankDataService, private router: Router, private pageService: PageService) {
  
  }

  ngOnInit(): void {
    this.columnDefinitions = [
      {
        id: 'edit',
        field: 'id',
        excludeFromColumnPicker: true,
        excludeFromGridMenu: true,
        excludeFromHeaderMenu: true,
        formatter: Formatters.editIcon,
        minWidth: 30,
        maxWidth: 30,
        onCellClick: (e: Event, args: OnEventArgs) => {
          this.router.navigate(['/bank/bank-detail/' + args.dataContext.id]);
        }
      },
      { id: 'id', field: 'id', name: 'Id', filterable: true, sortable: true, maxWidth: 200, type: FieldType.number, filter: { model: Filters.inputNumber } },
      { id: 'name', field: 'name', name: 'Name', filterable: true, sortable: true , maxWidth: 200}
     ];

    this.gridOptions = {
      backendServiceApi: {
        service: new GraphqlService(),
        options: {
          columnDefinitions: this.columnDefinitions,
          datasetName: GRAPHQL_QUERY_DATASET_NAME
        },
        process: (query) => this.getBanks(),
      }
    };
 
  }

  angularGridReady(angularGrid: AngularGridInstance) {
    this.angularGrid = angularGrid;
  }

  getBanks(): Observable<GraphqlPaginatedResult> {

   
    var args = this.pageService.getPageArgs(this.angularGrid);
    console.log(args);
    return this.dataService.searchBanks(args)
      .pipe(map(
        page => {
          var result: GraphqlPaginatedResult = {
            data: {
              [GRAPHQL_QUERY_DATASET_NAME]: {
                nodes: page.items,
               
                totalCount: page.totalCount
              }
            }
          };

          return result;
        }));
  }
 
}

我必须在哪里调用 this.angularGrid.resizerService.resizeGrid();？

编辑：我在下面设置

**

AngularSlickgridModule.forRoot({
      enableAutoResize: true,
      autoHeight: true,
      alwaysShowVerticalScroll: false,
      autoResize: {
        containerId: 'grid-container',
         sidePadding: 15,
        bottomPadding: 20,
        calculateAvailableSizeBy: 'container' ,
        -----------   if i set below the grid is showing correctly
        maxHeight: 600,   
        minHeight: 250,
        maxWidth: 800,
        minWidth: 200
-----------------
      },

** 它是这样显示的

在此处输入图像描述

4

1 回答 1

2

问题是行中的内容量超过了包含父元素的宽度。你看到它是因为溢出是可见的。输入元素都具有设定的宽度并且溢出容器。

代码没有问题。你只是没有你想要的空间。

您可以将 id 的 minwidth 和 maxwidth 减少到 5 或 10。

所有显示数字的字段都可以更小。也许你可以在那里节省一些空间。电话号码可能不需要 30 个字符长的字段。

您还可以通过使用较小的尺寸来缩小内容。

在你的 css 文件中添加一个 css 类：

.make-smaller input{
font-size:10px;    // make the font small
width:fit-content; // will make is as big as the content
}

如果这仍然不够，您可以让您的内容可滚动：

.make-scrollable{
overflow-x: scroll;    // make the container scrollable

}

然后，您可以在 html 中使用这些 css 类将它们应用于您的元素：

<div class="card-body make-scrolable">  <--- content scrolable 

    <div class="form-group row make-smaller" id="grid-container"> <-- make things smaller

      <angular-slickgrid gridId="branchGrid" 
        [columnDefinitions]="columnDefinitions"
        [gridOptions]="gridOptions" [dataset]="dataset"                                
        (onAngularGridCreated)="angularGridReady($event)">
      </angular-slickgrid>
     </div>
于 2020-12-29T07:18:37.133 回答