datagrid - React-Admin - 如何在 React-Admin 中创建没有列表的 Datagrid
问题描述
如何在 React-Admin 中创建没有列表的 Datagrid?
在 React-admin 中,能够使用 Datagrid 显示您需要将其嵌套在 List 中的值,如下所示:
<List {...props}>
<Datagrid>
<Textfield source"name" />
<Datagrid />
<List/>
但我需要在列表之外使用 dDatagrid。Datagrid 的值必须显示在 Tab 内类型的屏幕中。
解决方案
在这里,我如何使用 React-Admin 2.9 解决了这个问题
首先我使用了'react-admin'的导入{查询};从端点数据/产品中获取数据,然后将 ID 转换为它自己数据的键。
向组件CustomDatagrid传递了两个数组,它们将用于显示值。第一个是 ID 数组,第二个数组是包含数据并使用 ID 作为其键以访问值的数组。
ProductShow.js
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import {
TextField,
Query,
showNotification,
// ReferenceField,
DateField,
} from 'react-admin';
import CustomDatagrid from './CustomDatagrid';
const convertKeyToIndice = (datas) => {
const { data } = datas;
let ids = [];
const dataKey = [];
if (data) {
ids = data.map((elemento) => {
dataKey[elemento.id] = elemento;
return elemento.id;
});
return ({ ids, dataKey });
}
return ({});
};
const ProductShow = (props) => {
const { record } = props;
const { productId, dateValue } = record;
const [newPage, setNewPage] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(50);
const filter = {
pagination: { page: newPage + 1, perPage: rowsPerPage },
sort: { field: 'id', order: 'ASC' },
filter: { productId, dateValue: dateValue },
};
return (
<Query type="GET_LIST" resource="data/product" payload={filter}>
{(datas) => {
if (datas.loading && !datas.error) { return <div>Wait...</div>; }
if (datas.error) {
props.showNotification('Not Found');
return <div />;
}
const dataGridValues = {
...convertKeyToIndice(datas),
total: datas.total,
rowsPerPage,
setRowsPerPage,
newPage,
setNewPage,
};
return (
<>
<CustomDatagrid dataGridValues={dataGridValues}>
{/* <ReferenceField
sortBy="product.id"
source="productId"
reference="product"
linkType={false}
allowEmpty
{...props}
label="product"
>
<TextField source="name" />
</ReferenceField> */}
<DateField label="Date" source="valueDate" showTime />
<TextField label="Value1" source="value1" />
<TextField label="Value2" source="value2" />
<TextField label="Value3" source="value3" />
<TextField label="Value4" source="value4" />
<TextField label="Value5" source="value5" />
</CustomDatagrid>
</>
);
}}
</Query>
);
};
ProductShow.propTypes = {
productId: PropTypes.string.isRequired,
dateValue: PropTypes.string.isRequired,
showNotification: PropTypes.func.isRequired,
record: PropTypes.oneOfType([PropTypes.object]).isRequired,
};
export default connect(null, { showNotification })(ProductShow);
在TableHead中,它按照您在父ProductShow组件内的CustomDatagrid中包装组件的顺序显示每列的标签。
要像 React-Admin 列表那样显示组件,使用
{React.cloneElement(child,
{ record: dataKey[id] },
(child.props.children ? child.props.children : null))}
CustomDatagrid.js
import React from 'react';
import {
Table,
TableRow,
TableHead,
TableCell,
TableBody,
TablePagination,
} from '@material-ui/core';
import PropTypes from 'prop-types';
const CustomDatagrid = (propsDataGrid) => {
const { children, dataGridValues } = propsDataGrid;
const {
dataKey,
ids,
total,
rowsPerPage,
setRowsPerPage,
setNewPage,
newPage,
} = dataGridValues;
const handleChangePage = (event, page) => {
setNewPage(page);
};
const handleChangeRowsPerPage = (event) => {
const vlrDecimal = parseInt(event.target.value, 10);
setRowsPerPage(vlrDecimal);
setNewPage(0);
};
return (
<>
<Table style={{ width: '100%' }}>
<TableHead>
<TableRow>
{children && children.map(({ props }) => (
<TableCell>
{props && props.label ? props.label : props.source}
</TableCell>
))
}
</TableRow>
</TableHead>
<TableBody>
{ids && ids.map(id => (
<TableRow>
{React.Children.map(children,
child => (
<TableCell>
{React.cloneElement(child,
{ record: dataKey[id] },
(child.props.children ? child.props.children : null))}
</TableCell>
))}
</TableRow>
))
}
</TableBody>
</Table>
<TablePagination
rowsPerPageOptions={[50, 100, 250]}
component="div"
count={total}
rowsPerPage={rowsPerPage}
page={newPage}
onChangePage={handleChangePage}
onChangeRowsPerPage={handleChangeRowsPerPage}
labelRowsPerPage="Results per Page:"
/>
</>
);
};
CustomDatagrid.propTypes = {
source: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
};
export default CustomDatagrid;
推荐阅读
- excel - Workbooks.Open VBA 代码行在 Excel 中结束了我的 F8 步骤并运行宏(就像我点击了 F5 一样)
- python - 有没有办法在熊猫数据框中使用 python 查找序列中缺失的数字?
- spring-boot - AssertionFailedError 在服务中测试 JPA 接口
- javascript - Angular 链接会更改 URL,但不会更改内容
- c++ - 未获取数组 Visual C++ 的所有元素
- elasticsearch - 使用 elasticsearch v6 中的术语从数组中搜索值不起作用
- salt-stack - 在 master 上执行 salt 命令
- plugins - 使用插件创建的功能未正确保存 - QGIS
- python - LAPACK 的 zgesvd 结果与 scipy.linalg 的 SVD 不同
- html - 如何在 CSS 中的 DD 标签上获得悬挂缩进,同时还使用内容:之前