时间戳

首页 > 解决方案 > 根据角度中的日期列值更改剑道网格中的行颜色

angular - 根据角度中的日期列值更改剑道网格中的行颜色

问题描述

在此处输入图像描述我有一个像这样的剑道网格

<kendo-grid
  [data]="gridData"
  [selectable]="false"
  [kendoGridSelectBy]="'Id'"
  [selectedKeys]="selectedIds"
  [pageable]="{ pageSizes: gridPageSizes }"
  [pageSize]="state.take"
  [skip]="state.skip"
  [scrollable]="'none'"
  [groupable]="false"
  [group]="state.group"
  (dataStateChange)="dataStateChange($event)"
  [filterable]="false"
  [filter]="state?.filter"
  [sortable]="true"
  [sort]="state?.sort"
  [rowClass]="rowCallBack"
>
<kendo-grid-column
    field="invoiceNumber"
    title="Invoice Number"
  >
  </kendo-grid-column>
 <kendo-grid-column
    title="PO"
  >
    <ng-template kendoGridCellTemplate let-dataItem="dataItem">
      {{dataItem.PO}}
    </ng-template>
  </kendo-grid-column>

 <kendo-grid-column
    field="StatusChangedDate"
    title="StatusChangedDate"
    filter="date"
    format="{0:d}"
  >
    <ng-template kendoGridCellTemplate let-dataItem>
      <time>{{ dataItem.StatusChangedDate | l10nDate: language:'short' }}</time>
    </ng-template>
  </kendo-grid-column>
</kendo-grid>

如果 StatusChangedDate 早 1 周，我如何在 kendogrid 中为整行（或记录）着色，并在发票编号列上显示警报图像/符号以及发票编号

谢谢。

标签： angular

解决方案

回调函数已绑定到[rowClass]属性。我们可以使用它来检查自日期以来是否已经过去一周StatusChangedDate并设置自定义背景颜色。

还要注意encapsulation组件装饰器中的选项。ViewEncapsulation.None指示 Angular 在没有任何封装的情况下使用全局 CSS。最后在CSShighlight选择器中添加了剑道网格CSS选择器.k-grid tr来设置背景颜色。

以下应该这样做

import { Component, ViewEncapsulation } from '@angular/core';
import { RowClassArgs } from '@progress/kendo-angular-grid';

import { sampleData } from './data';

@Component({
    selector: 'my-app',
    encapsulation: ViewEncapsulation.None,
    styles: [
      `
      .k-grid tr.highlight {
        background-color: #ff6666;
      }
      `
    ],
    template: 
      `
      <kendo-grid id="grid"
        [data]="gridData" 
        [resizable]="true"
        [rowClass]="rowCallBack"
        [selectable]="false"
        [kendoGridSelectBy]="'Id'"
        [pageable]="{ pageSizes: gridPageSizes }"
        [pageSize]="20"
        [skip]="true"
        [scrollable]="'none'"
        [groupable]="false"
        [filterable]="false"
        [sortable]="true">

        <kendo-grid-column field="invoiceNumber" title="Invoice" width="40">
        </kendo-grid-column>
        <kendo-grid-column title="PO" width="80">
          <ng-template kendoGridCellTemplate let-dataItem="dataItem">
            {{dataItem.PO}}
          </ng-template>
        </kendo-grid-column>
        <kendo-grid-column
          field="StatusChangedDate"
          title="StatusChangedDate"
          filter="date"
          format="{0:d}"
          width="80">
          <ng-template kendoGridCellTemplate let-dataItem>
            <time>{{ dataItem.StatusChangedDate | date: 'dd/MM/yyyy' }}</time>
          </ng-template>
        </kendo-grid-column>

      </kendo-grid>
      `
})
export class AppComponent {
  public gridData: any[] = sampleData;

  public rowCallBack(context: RowClassArgs) {
    const utcOld = Date.parse(context.dataItem.StatusChangedDate);
    const utcNow = new Date().getTime();
    if ((Math.abs(utcNow - utcOld)) > 604800000) {  // 604800000 = 1 week in microseconds
      return { highlight: true };
    }
  }
}

工作示例：Stackblitz

推荐阅读