AgGrid Excel导出去除前导零。

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

AgGrid Excel Export Stripping Leading 0's

问题

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

  1. 0001458
  2. 0008451
  3. 0008451

它们显示为：

  1. 1458
  2. 8451
  3. 8451

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

  1. '0001458'
  2. '0008451'
  3. '0008451'

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

  1. import React, { useState, useEffect, useRef } from 'react';
  2. import { render } from 'react-dom';
  3. import { AgGridReact } from 'ag-grid-react';
  5. import 'ag-grid-community/styles/ag-grid.css';
  6. import 'ag-grid-community/styles/ag-theme-alpine.css';
  8. const myPromise = new Promise((resolve, reject) => {
  9.   setTimeout(() => {
  10.     resolve(
  11.       [
  12.         { make: 'Toyota', model: '0001458', price: 35000 },
  13.         { make: 'Ford', model: '0008451', price: 32000 },
  14.         { make: 'Porsche', model: '0085452', price: 72000 },
  15.       ]
  16.     );
  17.   }, 300);
  18. });
  20. const App = () => {
  21.   const [rowData, setRowData] = useState([]);
  22.   const initData = useRef([]);
  23.   const gridApi = useRef();
  25.   const [columnDefs] = useState([
  26.     { field: 'make' },
  27.     { field: 'model' },
  28.     { field: 'price', editable: true },
  29.   ]);
  31.   const gridReady = (params) => {
  32.     gridApi.current = params?.api;
  33.   }
  35.   useEffect(() => {
  36.     let data = myPromise
  37.       .then((data) => {
  38.         console.log(data);
  39.         setRowData(data);
  40.         initData.current = JSON.parse(JSON.stringify(data));
  41.       });
  42.   }, []);
  44.   const exportExcel = () => {
  45.     gridApi.current.exportDataAsExcel();
  46.   }
  48.   return (
  49.     <div>
  50.       <button onClick={exportExcel}>Back to original</button>
  52.       <br></br>
  54.       <div className="ag-theme-alpine" style={{ height: 400, width: 600 }}>
  55.         <AgGridReact rowData={rowData} columnDefs={columnDefs} onGridReady={gridReady}></AgGridReact>
  56.       </div>
  58.     </div>
  59.   );
  60. };

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

英文:

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

  1. 0001458
  2. 0008451
  3. 0008451

They display as:

  1. 1458
  2. 8451
  3. 8451

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

  1. &#39;0001458&#39;
  2. &#39;0008451&#39;
  3. &#39;0008451&#39;

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

  1. import React, { useState, useEffect, useRef } from &#39;react&#39;;
  2. import { render } from &#39;react-dom&#39;;
  3. import { AgGridReact } from &#39;ag-grid-react&#39;;
  4. import &#39;ag-grid-community/styles/ag-grid.css&#39;;
  5. import &#39;ag-grid-community/styles/ag-theme-alpine.css&#39;;
  6. const myPromise = new Promise((resolve, reject) =&gt; {
  7. setTimeout(() =&gt; {
  8. resolve(
  9. [
  10. { make: &#39;Toyota&#39;, model: &#39;0001458&#39;, price: 35000 },
  11. { make: &#39;Ford&#39;, model: &#39;0008451&#39;, price: 32000 },
  12. { make: &#39;Porsche&#39;, model: &#39;0085452&#39;, price: 72000 },
  13. ]
  14. );
  15. }, 300);
  16. });
  17. const App = () =&gt; {
  18. const [rowData, setRowData] = useState([]);
  19. const initData = useRef([]);
  20. const gridApi = useRef();
  21. const [columnDefs] = useState([
  22. { field: &#39;make&#39; },
  23. { field: &#39;model&#39; },
  24. { field: &#39;price&#39;, editable: true },
  25. ]);
  26. const gridReady = (params) =&gt; {
  27. gridApi.current = params?.api;
  28. }
  29. useEffect(() =&gt; {
  30. let data = myPromise
  31. .then((data) =&gt; {
  32. console.log(data);
  33. setRowData(data);
  34. initData.current = JSON.parse(JSON.stringify(data));
  35. });
  36. }, []);
  37. const exportExcel = () =&gt; {
  38. gridApi.current.exportDataAsExcel();
  39. }
  40. return (
  41. &lt;div&gt;
  42. &lt;button onClick={exportExcel}&gt;Back to original&lt;/button&gt;
  43. &lt;br&gt;&lt;/br&gt;
  44. &lt;div className=&quot;ag-theme-alpine&quot; style={{ height: 400, width: 600 }}&gt;
  45. &lt;AgGridReact rowData={rowData} columnDefs={columnDefs} onGridReady={gridReady}&gt;&lt;/AgGridReact&gt;
  46. &lt;/div&gt;
  47. &lt;/div&gt;
  48. );
  49. };

答案1

得分: 1

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

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

定义你的类型

  1. const excelStyles = useMemo(() => [
  2.   {
  3.     id: 'stringType',
  4.     dataType: 'String',
  5.   },
  6.   // ...
  7. ]);

作为属性传递

  1. <AgGridReact
  2.   ref={gridRef}
  3.   rowData={rowData}
  4.   excelStyles={excelStyles}
  5. />

定义一个值获取器方法（重要）

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

修改你的列定义如下

  1. const [columnDefs, setColumnDefs] = useState([
  2.   { field: 'make' },
  3.   {
  4.     field: 'model',
  5.     valueGetter: valueGetter,
  6.     field: 'Model (String)',
  7.     cellClass: 'stringType',
  8.   },
  9.   { field: 'price', editable: true },
  10. ]);

结果
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

  1. const excelStyles = useMemo(() =&gt; [
  2. {
  3. id: &#39;stringType&#39;,
  4. dataType: &#39;String&#39;,
  5. },
  6. // ...
  7. ]);

Pass as a prop

  1. &lt;AgGridReact
  2. ref={gridRef}
  3. rowData={rowData}
  4. excelStyles={excelStyles}
  5. /&gt;

Define a value getter method (Important)

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

Modify your column definitions like that

  1. const [columnDefs, setColumnDefs] = useState([
  2. { field: &#39;make&#39; },
  3. {
  4. field: &#39;model&#39;,
  5. valueGetter: valueGetter,
  6. field: &#39;Model (String)&#39;,
  7. cellClass: &#39;stringType&#39;,
  8. },
  9. { field: &#39;price&#39;, editable: true },
  10. ]);

Result
AgGrid Excel导出去除前导零。

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

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

发表评论

匿名网友

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

确定