AgGrid Excel导出去除前导零。

huangapple go评论194阅读模式
英文:

AgGrid Excel Export Stripping Leading 0's

问题

我正在尝试将网格导出到Excel。model 单元格中的值未正确导出。而不是导出为:

0001458
0008451
0008451

它们显示为:

1458
8451
8451

来自返回 model 数据的 API 实际值为 string,因此:

'0001458'
'0008451'
'0008451'

示例:https://stackblitz.com/edit/ag-grid-react-hello-world-r3sjfn?file=index.js

import React, { useState, useEffect, useRef } from 'react';
import { render } from 'react-dom';
import { AgGridReact } from 'ag-grid-react';

import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(
      [
        { make: 'Toyota', model: '0001458', price: 35000 },
        { make: 'Ford', model: '0008451', price: 32000 },
        { make: 'Porsche', model: '0085452', price: 72000 },
      ]
    );
  }, 300);
});

const App = () => {
  const [rowData, setRowData] = useState([]);
  const initData = useRef([]);
  const gridApi = useRef();

  const [columnDefs] = useState([
    { field: 'make' },
    { field: 'model' },
    { field: 'price', editable: true },
  ]);

  const gridReady = (params) => {
    gridApi.current = params?.api;
  }

  useEffect(() => {
    let data = myPromise
      .then((data) => {
        console.log(data);
        setRowData(data);
        initData.current = JSON.parse(JSON.stringify(data));
      });
  }, []);

  const exportExcel = () => {
    gridApi.current.exportDataAsExcel();
  }

  return (
    <div>
      <button onClick={exportExcel}>Back to original</button>

      <br></br>

      <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
        <AgGridReact rowData={rowData} columnDefs={columnDefs} onGridReady={gridReady}></AgGridReact>
      </div>

    </div>
  );
};

请注意,我只提供了代码的翻译部分。

英文:

I am trying to export a grid to Excel. Values in the model cells are not exported correctly. Instead of exporting as

0001458
0008451
0008451

They display as:

1458
8451
8451

The actual values coming from the API returning the data for model is coming as string, so:

&#39;0001458&#39;
&#39;0008451&#39;
&#39;0008451&#39;

Example: https://stackblitz.com/edit/ag-grid-react-hello-world-r3sjfn?file=index.js

import React, { useState, useEffect, useRef } from &#39;react&#39;;
import { render } from &#39;react-dom&#39;;
import { AgGridReact } from &#39;ag-grid-react&#39;;
import &#39;ag-grid-community/styles/ag-grid.css&#39;;
import &#39;ag-grid-community/styles/ag-theme-alpine.css&#39;;
const myPromise = new Promise((resolve, reject) =&gt; {
setTimeout(() =&gt; {
resolve(
[
{ make: &#39;Toyota&#39;, model: &#39;0001458&#39;, price: 35000 },
{ make: &#39;Ford&#39;, model: &#39;0008451&#39;, price: 32000 },
{ make: &#39;Porsche&#39;, model: &#39;0085452&#39;, price: 72000 },
]
);
}, 300);
});
const App = () =&gt; {
const [rowData, setRowData] = useState([]);
const initData = useRef([]);
const gridApi = useRef();
const [columnDefs] = useState([
{ field: &#39;make&#39; },
{ field: &#39;model&#39; },
{ field: &#39;price&#39;, editable: true },
]);
const gridReady = (params) =&gt; {
gridApi.current = params?.api;
}
useEffect(() =&gt; {
let data = myPromise
.then((data) =&gt; {
console.log(data);
setRowData(data);
initData.current = JSON.parse(JSON.stringify(data));
});
}, []);
const exportExcel = () =&gt; {
gridApi.current.exportDataAsExcel();
}
return (
&lt;div&gt;
&lt;button onClick={exportExcel}&gt;Back to original&lt;/button&gt;
&lt;br&gt;&lt;/br&gt;
&lt;div className=&quot;ag-theme-alpine&quot; style={{ height: 400, width: 600 }}&gt;
&lt;AgGridReact rowData={rowData} columnDefs={columnDefs} onGridReady={gridReady}&gt;&lt;/AgGridReact&gt;
&lt;/div&gt;
&lt;/div&gt;
);
};

答案1

得分: 1

答案在https://www.ag-grid.com/react-data-grid/excel-export-data-types/中。

这是如何实现Thomas Renger的评论。

定义你的类型

const excelStyles = useMemo(() => [
  {
    id: 'stringType',
    dataType: 'String',
  },
  // ...
]);

作为属性传递

<AgGridReact
  ref={gridRef}
  rowData={rowData}
  excelStyles={excelStyles}
/>

定义一个值获取器方法(重要)

const valueGetter = (params) => {
  return params.data.model;
};

修改你的列定义如下

const [columnDefs, setColumnDefs] = useState([
  { field: 'make' },
  {
    field: 'model',
    valueGetter: valueGetter,
    field: 'Model (String)',
    cellClass: 'stringType',
  },
  { field: 'price', editable: true },
]);

结果
AgGrid Excel导出去除前导零。

Plunker: https://plnkr.co/edit/BK0WN7mLOcm0kzpk?preview

英文:

The answer is https://www.ag-grid.com/react-data-grid/excel-export-data-types/

This is how you can implement Thomas Renger's comment

Define your types

const excelStyles = useMemo(() =&gt; [
{
id: &#39;stringType&#39;,
dataType: &#39;String&#39;,
},
// ...
]);

Pass as a prop

&lt;AgGridReact
ref={gridRef}
rowData={rowData}
excelStyles={excelStyles}
/&gt;

Define a value getter method (Important)

const valueGetter = (params) =&gt; {
return params.data.model;
};

Modify your column definitions like that

const [columnDefs, setColumnDefs] = useState([
{ field: &#39;make&#39; },
{
field: &#39;model&#39;,
valueGetter: valueGetter,
field: &#39;Model (String)&#39;,
cellClass: &#39;stringType&#39;,
},
{ field: &#39;price&#39;, editable: true },
]);

Result
AgGrid Excel导出去除前导零。

Plunker: https://plnkr.co/edit/BK0WN7mLOcm0kzpk?preview

huangapple
  • 本文由 发表于 2023年7月24日 20:12:29
  • 转载请务必保留本文链接:https://go.coder-hub.com/76754391.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定