根据条件突出显示一行
Highlight A Row On Condition
我试图在 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
有没有其他方法可以实现它,或者我在这里遗漏了什么?
您的解决方案存在两个主要问题:
- 您将 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,它可以在不更改封装的情况下工作。
我试图在 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
有没有其他方法可以实现它,或者我在这里遗漏了什么?
您的解决方案存在两个主要问题:
- 您将 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,它可以在不更改封装的情况下工作。