代码之家 › 专栏 › 技术社区 › Kerim092

如何在ag网格上显示数据之前格式化数据

ag-grid-ng2 ag-grid

2

Kerim092 · 技术社区 · 6 年前

我刚发现 ag-grid . 我在angular2+上使用它并从api加载数据其中一个字段是date,但它是ISO格式的我一直在尝试格式化它,有什么方法可以做到,有没有可能添加管道或其他方式通常我是这样做的{{someISODate}日期:'dd.MM.yyyy HH:MM'}在显示之前,我真的需要在组件中手动格式化它吗另外,我想知道是否可以在一列下添加两个字段为什么?我有列author,在我从api获得的数据中,我有author.firstname和author.lastname,现在我想在同一列中显示这两个字段任何暗示或例子都是非常受欢迎的。

columnDefs = [
    {headerName: 'Datum kreiranja', field: 'createdAt' }, //<-- wanna format it
    {headerName: 'Vrsta predmeta', field: 'type.name' },
    {headerName: 'Opis', field: 'description'},
    {headerName: 'Kontakt', field: 'client.name'},
    {headerName: 'Autor', field: 'author.firstname'}, //<-- wanna display author.lastname in same cell
    {headerName: 'Status', field: 'status.name'}
];

5 回复 | 直到 6 年前

1

16

Paritosh 5 年前

你可以用 cellRenderer (或 valueFormatter 如更新中所述) 和 moment 图书馆。

 {
      headerName: 'Datuk kreiranja', field: 'createdAt',
      cellRenderer: (data) => {
          return moment(data.createdAt).format('MM/DD/YYYY HH:mm')
      }
 }

如果你不想用 瞬间 ,那么下面是你如何做到的。

cellRenderer: (data) => {
     return data.value ? (new Date(data.value)).toLocaleDateString() : '';
}

为了 Author 也在现场,

cellRenderer: (data) => {
     return data.author.firstname + ' ' + data.author.lastname;
}

参考: ag-grid: Cell Rendering

更新

按照@Mariusz的建议,使用 值格式化程序 在这种情况下更有意义根据文件, Value Formatter vs Cell Renderer

值格式化程序用于文本格式化,单元格呈现程序用于当您希望包含HTML标记和牢房例如,如果你想在一个值中加入标点符号, 使用值格式化程序,但如果要放置按钮或HTML链接使用单元渲染器。

2

3

DancingDad 6 年前

你可以用 valueFormatter

{headerName: 'Datuk kreiranja', field: 'createdAt', valueFormatter: this.dateFormatter},

创建一个小函数:

dateFormatter(params) {
  return moment(params.value).format('MM/DD/YYYY HH:mm');
}

3

1

Ragavan Rajan 5 年前

首先要感谢帕里托斯。我面临的问题是我从API接收到的日期字段的格式如下

“endDateUTC”:“2020-04-29T12:00:00”,

我使用cellrenderer和矩库遵循Paritosh解决方案,但是值是 总是格式化为今天的 因为某种原因约会。

下面的解决方案正在使用 带矩库的valueFormatter .

这是为Angular2+版本工作真的很简单

在.ts文件中:

    import * as moment from 'moment';

{
    headerName: 'End Date',
    field: 'endDateUTC',
    minWidth: 80,
    maxWidth: 100,
    valueFormatter: function (params) {
        return moment(params.value).format('D MMM YYYY');
    },
},

你将得到的结果是:

结束日期: 2020年4月29日

请随意更改您需要的日期格式。

希望这对某些人有帮助。

4

0

Vishwajeet 5 年前

对于Angular,如果您想在不使用moment.js的情况下执行此操作,可以尝试以下操作:

import { Component, OnInit, Inject, LOCALE_ID } from '@angular/core';
import { formatDate } from '@angular/common';

@Component({
  selector: 'app-xyz'
})
export class xyzComponent implements OnInit {

  constructor( @Inject(LOCALE_ID) private locale: string ) {
  }

  columnDefs = [

    {headerName: 'Submitted Date', field: 'lastSubmittedDate', cellRenderer: (data) => {
      return  formatDate(data.value, 'dd MMM yyyy', this.locale);
     }];

}

此组件使用角度/公共的格式日期

5

-1

dongfu.zheng 6 年前

试试这个:

        {
            headerName: 'Order Date',
            field: 'OrderDate',
            valueFormatter: function (params) {
               var nowDate = new Date(parseInt(params.value.substr(6)));
               return nowDate.format("yyyy-mm-dd");
        }