标签: onrowclick

我是材料2的新手,我已经实现了mat表,我在行中点击事件打开对话框,在最后一栏"Action"中还有一个菜单按钮,但点击按钮它也打开对话框而不是打开菜单.

表

    <mat-table #table [dataSource]="dataSource" matSort  (matSortChange)="sortData($event)">
    <ng-container matColumnDef="id">
          <mat-header-cell *matHeaderCellDef > No. </mat-header-cell>
          <mat-cell *matCellDef="let element"> 
              <mat-checkbox checked='true'></mat-checkbox>
          </mat-cell>
    </ng-container>
    <ng-container matColumnDef="unit_num">
        <mat-header-cell *matHeaderCellDef  mat-sort-header="unit_num"> Unit No. </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.unit_num}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="unit_type">
        <mat-header-cell *matHeaderCellDef mat-sort-header="unit_type"> Unit Type </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.unit_type}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="shares">
        <mat-header-cell *matHeaderCellDef mat-sort-header="shares"> Shares </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.shares}} </mat-cell>
      </ng-container>
    <ng-container matColumnDef="sections">
        <mat-header-cell *matHeaderCellDef>Section </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.sections.section_type}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="buildings">
        <mat-header-cell *matHeaderCellDef >Building …

我正在使用 DataGrid 来管理服务配置。我想使用自动生成的行复选框来管理多个删除操作，但想使用 onRowClick 事件将行数据提供给模式对话框表单进行编辑。我的 onRowClick 处理程序工作得很好，并且完全按照我想要的方式填充模式。不幸的是，单击该行也会选择该行——换句话说，选中所单击的行的复选框。我希望仅当单击复选框本身时才选择该行，而不是单击该行时。

我的 DataGrid 声明如下所示。

                    <DataGrid 
                        columns={this.columns} 
                        rows={fmConfigs}                              
                        pageSize={10} 
                        checkboxSelection 
                        autoHeight
                        onRowClick={(rowData) => this.handleClickOpenFmConfigForm(rowData.row)} 
                />

通常，我希望 onRowClick 处理程序有第二个参数来表示事件，因此我可以调用类似 e.stopPropagation() 的东西，但唯一传递的是 GridRowParams 类型的对象，该对象没有文档。我希望事件对象可能埋在某个地方，但我找不到它。当我将对象打印到控制台时，我可以看到有很多数据 - 这就是我如何找到需要传递到表单的行数据的方法 - 但我没有看到该事件。

有谁知道如何做到这一点？

如何在mat-table中通过按钮触发模式，而不触发行（click）事件？我已经在Ang Cell中看到并阅读了Angular Material 2 Table Mat Row Click事件，也单击Mat Cell中的按钮单击，但是在那里使用$ event.stopPropagation（）的解决方案阻止显示模态。

我遵循了这个https://stackblitz.com/edit/angular-material2-expandable-rows-filter-pagination-sorting?file=app%2Ftable-example.html的行扩展功能。

这是我的代码的一小段：

<mat-table [dataSource]="dataSource"  matSort>
        <ng-container matColumnDef="name">
          <mat-header-cell *matHeaderCellDef  mat-sort-header>Name</mat-header-cell>
          <mat-cell *matCellDef="let element">{{element.name}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="username">
          <mat-header-cell *matHeaderCellDef  mat-sort-header>Username</mat-header-cell>
          <mat-cell *matCellDef="let element">{{element.username}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="email" class="hideOnResponse">
          <mat-header-cell *matHeaderCellDef mat-sort-header>Email</mat-header-cell>
          <mat-cell *matCellDef="let element">{{element.email}}</mat-cell>
        </ng-container>
        <ng-container matColumnDef="action">
          <mat-header-cell *matHeaderCellDef></mat-header-cell>
          <mat-cell *matCellDef="let element">
              <a (click)="editItem(element)" data-toggle="modal" data-target="#editor" matTooltip="Edit" aria-label="tooltip">
                <i class="fas fa-pencil-alt"></i>
              </a>
              <a (click)="deleteItem(element.id)" data-toggle="modal" data-target="#editor" matTooltip="Delete" aria-label="tooltip">
                <i class="fas fa-trash-alt"></i>
              </a>
          </mat-cell>
        </ng-container> …

我有一个rich:dataTable包含4列.

第一个是a selectBooleanCheckBox,它将一个名为"CheckEvent"的事件(仅用于示例)激活到bean中.

同时,dataTable还支持该onRowClick事件,该事件在bean上触发"onRowClick".

我面临的问题是,当我点击第一列(检查一个)时,它onRowClick也会触发.在这种情况下,这肯定是一个问题:如果一行选中了检查,我只想取消选择它,则onRowClick突出显示行,这是我不想要的行为.

我试图oOnRowClick在其他三个内部定义事件rich:columns,但是我用这种方式实现的是什么都没有; 事件甚至没有触发,所以数据表没有onRowClick.

尝试通过bean创建逻辑也不起作用,因为当我输入onRowClick()方法时我不知道哪个列被推送.

我真的很绝望.任何帮助将不胜感激.