使第一行 igx-grid 不可编辑
Make first row of igx-grid not editable
我有一个正常的 igx-grid,其中的行都是可编辑的。但是,第一行不应该是可编辑的。我该如何处理?另外,在下面的代码片段中,你能告诉我我在最后一列中做错了什么吗?我只想在那里显示一个垃圾桶图标,但单元格是空白的。
<igx-grid (dropped)="onDropAllowed($event)" (onRowDragStart)="onDragAllowed($event)"
[data]="data?.approvers"
[height]="null" [rowDraggable]="true" igxDrop primaryKey="wwid">
<igx-column [cellEditorTemplate]="workerPickerTemplate" [editable]="true" field="name" header="Name">
</igx-column>
<igx-column [cellEditorTemplate]="workerPickerTemplate" [editable]="true" field="email"
header="Email"></igx-column>
<igx-column [cellEditorTemplate]="workerPickerTemplate" [editable]="true" field="wwid" header="WWID">
</igx-column>
<igx-column [editable]="true" field="role" header="Role"></igx-column>
<igx-column>
<button class="btn btn-danger" igxButton="icon" type="button">
<igx-icon>delete</igx-icon>
</button>
</igx-column>
</igx-grid>
您可以使用 IgxGridComponent
的 rowEditEnter 事件并取消它以防止进入编辑模式,有效地使其不可编辑。
关于您关于在列中设置图标的问题,您应该将内容包装在这样的模板中:
<igx-column width="100px" [filterable]="false">
<ng-template igxCell let-cell="cell">
<button igxButton="icon" (click)="removeRow(cell.cellID.rowIndex)">
<igx-icon>delete</igx-icon>
</button>
</ng-template>
</igx-column>
我有一个正常的 igx-grid,其中的行都是可编辑的。但是,第一行不应该是可编辑的。我该如何处理?另外,在下面的代码片段中,你能告诉我我在最后一列中做错了什么吗?我只想在那里显示一个垃圾桶图标,但单元格是空白的。
<igx-grid (dropped)="onDropAllowed($event)" (onRowDragStart)="onDragAllowed($event)"
[data]="data?.approvers"
[height]="null" [rowDraggable]="true" igxDrop primaryKey="wwid">
<igx-column [cellEditorTemplate]="workerPickerTemplate" [editable]="true" field="name" header="Name">
</igx-column>
<igx-column [cellEditorTemplate]="workerPickerTemplate" [editable]="true" field="email"
header="Email"></igx-column>
<igx-column [cellEditorTemplate]="workerPickerTemplate" [editable]="true" field="wwid" header="WWID">
</igx-column>
<igx-column [editable]="true" field="role" header="Role"></igx-column>
<igx-column>
<button class="btn btn-danger" igxButton="icon" type="button">
<igx-icon>delete</igx-icon>
</button>
</igx-column>
</igx-grid>
您可以使用 IgxGridComponent
的 rowEditEnter 事件并取消它以防止进入编辑模式,有效地使其不可编辑。
关于您关于在列中设置图标的问题,您应该将内容包装在这样的模板中:
<igx-column width="100px" [filterable]="false">
<ng-template igxCell let-cell="cell">
<button igxButton="icon" (click)="removeRow(cell.cellID.rowIndex)">
<igx-icon>delete</igx-icon>
</button>
</ng-template>
</igx-column>