英文:
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:
'0001458'
'0008451'
'0008451'
Example: 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>
);
};
答案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 },
]);
结果
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(() => [
{
id: 'stringType',
dataType: 'String',
},
// ...
]);
Pass as a prop
<AgGridReact
ref={gridRef}
rowData={rowData}
excelStyles={excelStyles}
/>
Define a value getter method (Important)
const valueGetter = (params) => {
return params.data.model;
};
Modify your column definitions like that
const [columnDefs, setColumnDefs] = useState([
{ field: 'make' },
{
field: 'model',
valueGetter: valueGetter,
field: 'Model (String)',
cellClass: 'stringType',
},
{ field: 'price', editable: true },
]);
Result
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论