代码之家  ›  专栏  ›  技术社区  ›  Bishan

在ngx数据表的特定列上禁用select

  •  0
  • Bishan  · 技术社区  · 6 年前

    我有一个ngxdatatable,有4个数据列,一个列有一个delete按钮,用于从表中删除行,如下所示。

    enter image description here

    HTML代码

    <ngx-datatable
    *ngIf="!isLoading"
    #table
    class="data-table"
    [scrollbarH]="true"
    [rows]="data"
    [columnMode]="'force'"
    [headerHeight]="50"
    [footerHeight]="50"
    [rowHeight]="'auto'"
    [limit]="limit"
    [selected]="selected"
    [selectionType]="'single'"
    (select)='onSelect($event)'>
    
        <ngx-datatable-column *ngFor="let columnData of columns" name={{columnData.name}} prop={{columnData.prop}}>
           <ng-template let-column="column" let-sort="sortFn" ngx-datatable-header-template>
              <span class="datatable-header-column datatable-header-cell-label" (click)="sort()"><i class="{{columnData.icon}}" ></i> {{columnData.name}}</span>
           </ng-template>
        </ngx-datatable-column>
    
        <ngx-datatable-column [sortable]="false" [maxWidth]="70">
            <ng-template let-column="column"  let-row="row" ngx-datatable-cell-template>
                <button class="btn btn-danger btn-mini" *ngIf='!row.unAssigning' (click)="onDelete(row, column)">
                    <i class="icofont icofont-trash"></i>
                </button>
                <img class="mini-spinner" *ngIf="row.unAssigning" src="../assets/img/busy-red.gif">
            </ng-template>
        </ngx-datatable-column>     
    
    </ngx-datatable>
    

    TS文件

    onSelect({
        selected
    }) {
        this.router.navigate(['/update', selected[0].id]);
    }
    

    当前选择行时,将用户重定向到另一页。但我需要删除重定向功能时,在表中单击删除按钮。重定向只能在单击数据列时执行。

    我怎样才能做到这一点?

    1 回复  |  直到 6 年前
        1
  •  7
  •   Tommy Gihan Kaveendra    6 年前

    如果我了解你的问题,你想按删除按钮,而不重定向用户与 onSelect 功能。

    您可以尝试以下代码:

    <button class="btn btn-danger btn-mini" *ngIf='!row.unAssigning' (click)="$event.preventDefault(); $event.stopPropagation(); onDelete(row, column)">
        <i class="icofont icofont-trash"></i>
    </button>