如何实现igx-grid删除按钮列固定首位且禁止用户对其执行操作

解决方法 #

1. 调整删除列的位置与属性配置
   你当前的删除列定义在业务列之后，且缺少表头配置、添加了多余的定位样式，先做以下调整：

• 将删除列移到所有<igx-column>标签的最前方，保证默认排在第一位置
• 删除删除列上多余的style="position: fixed;"属性，避免干扰grid自带的固定列布局
• 补充header属性设置表头显示内容，同时关闭所有用户可操作权限，修改后的删除列代码如下：

<igx-column 
  width="100px" 
  header="操作"
  [filterable]="false" 
  [pinned]="true"
  [sortable]="false"
  [editable]="false"
  [resizable]="false"
  [movable]="false"
  [disableHiding]="true"
  [disablePinning]="true"
>
  <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>

2. 属性作用说明：

• [disableHiding]="true"：该列不会出现在列隐藏的可选列表中，用户无法隐藏此列
• [disablePinning]="true"：禁止用户修改该列的固定状态
• [movable]="false"：禁止用户拖动该列调整排序位置
• 其余属性关闭了排序、编辑、调整宽度、过滤等所有常规列操作，仅保留按钮点击功能

3. 调整后的完整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="100px" 
    header="操作"
    [filterable]="false" 
    [pinned]="true"
    [sortable]="false"
    [editable]="false"
    [resizable]="false"
    [movable]="false"
    [disableHiding]="true"
    [disablePinning]="true"
  >
    <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-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-grid>

修改后删除列会固定在左侧第一位置，表头正常显示，且用户无法对该列执行隐藏、固定、拖动、排序等任何操作，不影响其他列的正常功能。

内容的提问来源于stack exchange，提问作者user12424500