固定 igx 列

Question

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

我想让这个列固定，如下所示：

我可以从固定/隐藏和所有其他操作中排除带有删除按钮的列，并始终在 igx-grid 中的第一个位置显示它。我不希望用户能够使用删除按钮对列执行任何操作。用户应该能够固定/隐藏/移动等其他列。

目前删除列显示为固定，这是我不想要的，因为该列显示为没有名称：

这是我的网格：

<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. 继续创建自定义工具栏隐藏操作。基本上，您可以添加button and overlay，并在此叠加层中提供所有列的列表，期待“删除列”，并在选择列时使用网格 API 执行列隐藏。