Question

我要在ag-grid表中更改行的背景色，只需单击该行

我已经尝试过使用getRowStyle和getRowClass，但是当最初加载表时，这似乎可行。因此，我尝试使用onrowClicked，但似乎无法正常工作。

onRowClicked : row => {
        if (row.data.hasNewData) {
          return { background: '#ff9998 !important'};
        } else if (row.data.hasWrongData === 'Yes') {
          return { background: '#f5ff8b !important' };
        } else if (row.data.hasNoData) {
          return { background: '#acff93 !important' };
        }
      }

我希望根据不同的数据参数在点击时更改行背景颜色

Answer 1

您应坚持使用 getRowStyle 并在使用 onRowClicked 事件单击行时使用 refreshCells（）手动触发它。

此外，在 getRowStyle 回调中，您需要使用 node.isSelected（）属性，以检测是否选择了行/节点。

gridOptions.onRowClicked = function(params) {
  gridOptions.api.refreshCells({
    rowNodes: [params.node],
    force: true // skips change detection -> always refreshes the row
  })
}

gridOptions.getRowStyle = function(params) {
  if (params.node.isSelected()) {
    if (row.data.hasNewData) {
      return { background: '#ff9998 !important'};
    } else if (row.data.hasWrongData === 'Yes') {
      return { background: '#f5ff8b !important' };
    } else if (row.data.hasNoData) {
      return { background: '#acff93 !important' };
    }
  }
}

Answer 2

使用ngFor *，然后将某些click事件与行绑定：

HTML：

<table>
 <thead>
   <th># Policy ID</th>
   <th>Policy name</th>
 </thead>
 <tbody>
    <tr *ngFor="let policy of policies; let i = index " (click)="changeBackGroud(i)" >
     <div [ngClass]="{'myBackgroud' : row[i].selected}">
      <td>{{policy.id}}</td>
      <td>{{policy.name}}</td>
     </div>
    </tr>
 </tbody>
</table>

Ts：使数组等于no。最初要与索引一起迭代的项目以及属性“ selected = false”。

row = policies;

// i is the index of selected item
changeBackGroud(i)
{
  row.forEach(function(element) {
      element.selected = false;
        });
  row[i].selected=true;
}

Css：

.myBackgroud
{
  backgroud:aqua; 
}

您可以相应地调整CSS；

如何更改Ag网格表中的行的背景色

2 个答案: