css 如果单元格的值从其原始值更改，则突出显示单元格和标题

gwbalxhn 于 2023-06-25 发布在其他

关注(0)|答案(1)|浏览(131)

我正在使用primeng表格单元格编辑。代码如下：

<div class="card">
    <p-table [value]="products" dataKey="id" [tableStyle]="{ 'min-width': '50rem' }">
        <ng-template pTemplate="header">
            <tr>
                <th style="width:25%">Code</th>
                <th style="width:25%">Name</th>
                <th style="width:25%">Inventory Status</th>
                <th style="width:25%">Price</th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-product let-editing="editing">
            <tr>
                <td [pEditableColumn]="product.code" pEditableColumnField="code">
                    <p-cellEditor>
                        <ng-template pTemplate="input">
                            <input pInputText type="text" [(ngModel)]="product.code" />
                        </ng-template>
                        <ng-template pTemplate="output">
                            {{ product.code }}
                        </ng-template>
                    </p-cellEditor>
                </td>
                <td [pEditableColumn]="product.name" pEditableColumnField="name">
                    <p-cellEditor>
                        <ng-template pTemplate="input">
                            <input pInputText type="text" [(ngModel)]="product.name" required />
                        </ng-template>
                        <ng-template pTemplate="output">
                            {{ product.name }}
                        </ng-template>
                    </p-cellEditor>
                </td>
                <td [pEditableColumn]="product.inventoryStatus" pEditableColumnField="inventoryStatus">
                    <p-cellEditor>
                        <ng-template pTemplate="input">
                            <input pInputText [(ngModel)]="product.inventoryStatus" />
                        </ng-template>
                        <ng-template pTemplate="output">
                            {{ product.inventoryStatus }}
                        </ng-template>
                    </p-cellEditor>
                </td>
                <td [pEditableColumn]="product.price" pEditableColumnField="price">
                    <p-cellEditor>
                        <ng-template pTemplate="input">
                            <input pInputText type="text" [(ngModel)]="product.price" />
                        </ng-template>
                        <ng-template pTemplate="output">
                            {{ product.price | currency: 'USD' }}
                        </ng-template>
                    </p-cellEditor>
                </td>
            </tr>
        </ng-template>
    </p-table>
</div>

TS：

import { ProductService } from '../../service/productservice';

@Component({
    selector: 'table-cell-edit-demo',
    templateUrl: 'table-cell-edit-demo.html'
})
export class TableCellEditDemo implements OnInit {
    products!: Product[];

    constructor(private productService: ProductService) {}

    ngOnInit() {
        this.productService.getProductsMini().then((data) => {
            this.products = data;
        });
    }
}

Stackblitz：
https://stackblitz.com/run?file=src%2Fapp%2Fdemo%2Ftable-cell-edit-demo.html
单元格编辑工作正常。如果任何特定单元格的值从其原始值更改，我想用红色突出显示这些特定单元格和不可编辑模式下的相应标题。我该怎么做？

css

来源：https://stackoverflow.com/questions/76533772/highlight-cells-and-header-if-value-of-a-cell-is-changed-from-its-original-value

1条答案

按热度按时间

4jb9z9bj1#

要在组件的HTML中对已编辑的单元格进行着色，可以执行以下步骤：
1.将模板引用变量#rows添加到<tr>元素，以使用@ViewChildren读取行。这将允许您访问组件中的行。

<tr #rows>

1.通过添加[id]属性，修改要跟踪编辑的<td>元素。[id]属性应设置为属性和rowIndex的组合，例如：[id]="'name'+index"。

<td pEditableColumn [id]="'name' + ri">

1.在表示可编辑字段的<input>元素中，添加(ngModelChange)以侦听输入值的更改。当值更改时，调用一个方法，如colorizeEditedCell(rowIndex, fieldName)，并将rowIndex和fieldName作为参数传递。

<input pInputText type="text" [(ngModel)]="product.name" (ngModelChange)="colorizeEditedCell(ri,'name')" required />

1.在组件类中添加@ViewChildren装饰器，以使用模板引用变量#rows读取行：

@ViewChildren('rows') rows: QueryList<ElementRef<HTMLTableRowElement>>;

1.将Renderer2注入到组件的构造函数中，以使用它来操作DOM：

constructor(private _renderer2: Renderer2) {}

1.在组件中定义colorizeEditedCell函数，以设置已编辑单元格的背景色。此函数以rowIndex和fieldName为参数。

colorizeEditedCell(rowIndex: number, fieldName: string) {
  const cols = this.rows.get(rowIndex).nativeElement.cells;
  for (let colIndex = 0; colIndex < cols.length; colIndex++) {
    const col = cols.item(colIndex);
    if (col.id == fieldName + rowIndex) {
      this._renderer2.setStyle(col, 'backgroundColor', '#ececec');
      break;
    }
  }
}

上面的代码将遍历指定行的单元格，并检查col.id是否与提供的fieldName + rowIndex匹配。如果找到匹配项，则使用Renderer2将单元格的背景色设置为#ececec。
注意：确保在组件文件中导入必要的依赖项，如Renderer2和ElementRef。
在可编辑表组件中有一个名为onEditComplete的事件，您可以通过向<td>标记添加某些属性来利用它，如文档中所述。下面是一个例子：

<td [pEditableColumn]="rowData"
[pEditableColumnField]="'year'" [pEditableColumnRowIndex]="index">

在上面的例子中，rowData对应于我们的例子中的product，'year'表示与该列相关联的产品的属性。在我们的示例中，columnsRowIndex属性设置为index值。
但是，需要注意的是，onEditComplete事件仅在输入字段失去焦点（在模糊上）时触发。这意味着如果字段中的数据发生了变化而不触发模糊事件，它不会立即通知您。
如果需要实时更新或希望在用户键入时跟踪更改，则需要使用其他机制，如(ngModelChange)或(input)事件，如前面的代码示例所示。

可能有其他可用的解决方案，但此方法应能有效满足您的要求。

赞(0）回复(0）举报 2023-06-25

我来回答

css 如果单元格的值从其原始值更改，则突出显示单元格和标题

1条答案

相关问题

热门标签

最新问答