固定 igx 列

Question

您好，我有一个 igx 网格，其中一列填充有删除按钮。

我想固定此列，如下所示：

我能否从 pinning/hiding 和所有其他操作中排除带有删除按钮的列，并始终将其显示在 igx-grid 的第一个位置。我不希望用户能够使用删除按钮对列执行任何操作。用户应该能够 pin/hide/move 等其他列。

目前删除列显示为固定，我不希望这样，因为显示的列没有名称：

这是我的网格：

<igx-grid igxPreventDocumentScroll
          #grid1
          [height]="'500px'" width="80%" [autoGenerate]='false'
          rowHeight ="60px"
          [batchEditing]="true"
          [data]="posts"
          style="margin-top: 1%; margin-left: 10%; margin-right: 10%; "
          [showToolbar]="true"
          [allowFiltering]="true"
          [columnHiding]="true"
          [hiddenColumnsText]="'hidden'"
          [columnPinning]="true"
          [pinnedColumnsText]="'pinned'"
          [primaryKey]="'lot'"
          (cellEditDone)="cellEditDoneHandler($event)"
          >

  <igx-column width="170px" field="monat" dataType="string" header="Monat" [resizable]="true" [sortable]="true" [editable]="true" [movable]="true" [cellClasses]="condFormatting">
    <ng-template igxCell let-cell="cell">
      <div class="cellvalue">{{cell.value}}</div>
        <button igxButton="icon" (click)="editSelectedData(cell.id.rowID,cell.column.field, cell.value)">
          <igx-icon fontSet="material" style="color: black; ">edit</igx-icon>
        </button>
    </ng-template>
  </igx-column>

  <igx-column width="170px" field="datum" dataType="string" header="Datum" [resizable]="true" [sortable]="true" [editable]="true" [movable]="true" [cellClasses]="condFormatting">
    <ng-template igxCell let-cell="cell">
      <div class="cellvalue">{{cell.value}}</div>
      <button igxButton="icon" (click)="editSelectedData(cell.id.rowID,cell.column.field, cell.value)">
        <igx-icon>edit</igx-icon>
      </button>
    </ng-template>
  </igx-column>

  <igx-column width="100px" [filterable]="false" [pinned]="true" style="position: fixed;">
    <ng-template igxCell let-cell="cell">
      <button igxButton="icon" [disabled]="cell.row.deleted" (click)="deleteRow(cell.id.rowID)">
        <igx-icon>delete</igx-icon>
      </button>
    </ng-template>
  </igx-column>

</igx-grid>

Answer 1

我的建议是采用不同的方法 - igx-grid 有一种内置的方法来处理此类功能，方法是利用 ActionStrip 组件，topic with sample and description.

在行悬停操作时，会出现一个覆盖区域，您可以在其中定义任意数量的自定义操作，在演示的情况下，它只会添加一个用于删除行的删除图标。

至于您描述的初始方法，它可以通过大量自定义逻辑来实现，这可能会导致将来出现维护问题。虽然，您可以通过提供自定义 UI - this topic provide explanation on how to set custom content.. Basically, you can add a button and overlay 继续创建自定义工具栏隐藏操作，并在此叠加层中提供所有列的列表，期望“删除列”，并在选择列时使用网格执行列隐藏 API.

固定 igx 列

Fixed igx column

infragistics

angular-ui

igx-grid