根据条件突出显示一行

Question

我试图在 table 中根据条件突出显示一行。我正在使用 Jqxgrid 并在前端做了一些事情来突出显示：

TypeScript:

carsDataAgain = [
    {
      year: '1967',
      make: 'Pontiac',
      model: 'GTO',
      id: '1002',
    },
];

getCarsData(val: string) {
    //console.log(model);
    if (this.carsDataAgain.find((i) => i.model === val.model)) {
      return 'Matched';
    } else {
      return 'Unmatched';
    }
}

HTML:

<jqxGrid
  [theme]="'material'"
  [width]="getWidth()"
  [source]="hello"
  [columns]="columns"
  [pageable]="true"
  [autoheight]="true"
  [sortable]="true"
  [selectionmode]="'singlerow'"
  [altrows]="true"
  [enabletooltips]="true"
  [editable]="true"
  [filterable]="'true'"
  [columngroups]="columngroups"
  [keyboardnavigation]="'false'"
  enablekeyboarddelete="false"
  [ngClass]="{
    primary: getCarsData(hello) === 'Matched',
    secondary: getCarsData(hello) === 'Unmatched'
  }"
>
</jqxGrid>

在前端，我使用ngClass做了如下事情：

[ngClass]="{
    'primary': getCarsData(hello) === 'Matched',
    'secondary': getCarsData(hello) === 'Unmatched'
}"

所以我在做什么，方法中传递了数据源并检查了返回值以突出显示。最后，我正在验证 carsDataAgain 数组中是否存在现有模型 (GTO)，然后突出显示。由于有匹配模型，因此它应该突出显示第一行。这是我到目前为止尝试过的示例：Highlight A Row

有没有其他方法可以实现它，或者我在这里遗漏了什么？

Answer 1

您的解决方案存在两个主要问题：

您将 class 添加到 table 本身而不是特定行
即使由于 angular 渲染周期，getCarsData 被无限调用是正确的，您也可以在控制台中看到它。

我修改了你的 stackblitz 以使其在这里工作：

https://stackblitz.com/edit/jqxgrid-editable-njsbfh

基本上你创建一个箭头函数并在定义网格列时将它发送到一个名为 cellclassname 的属性

  cellclass = (row, column, value, rowData) => {

    if (this.carsDataAgain.find((i) => i.model === rowData.model)) {
      return 'green';
    }
  };
  ...
  columns: any[] = [
  {
      text: 'Year',
      datafield: 'year',
      width: 40,
      cellclassname: this.cellclass,
    },
    { text: 'Id', datafield: 'id', width: 40, cellclassname: this.cellclass },
    {
      text: 'Model',
      datafield: 'model',
      width: 100,
      cellclassname: this.cellclass,
    },
    {
      text: 'Make',
      datafield: 'make',
      width: 100,
      cellclassname: this.cellclass,
    },
  ];

另外，为了让 jqxgrid 能够看到应用程序组件中定义的 css classes，我们需要一个

  encapsulation: ViewEncapsulation.None,

这意味着来自 app.component.css 的样式将是全局的。您还可以在另一个全局 css 文件中定义 classes，它可以在不更改封装的情况下工作。

根据条件突出显示一行

Highlight A Row On Condition

angular

typescript

jqxgrid

jqwidget