如何仅在react-admin中导出列表中的选定项目？

Question

如何在react-admin中仅导出列表中的选定项目？

我们知道ExportButton可以创建CSV文件，但只能创建整个列表（使用当前过滤器和排序）。 can't be used用于列表中的选定项目。

Answer 1

我已经复制了react-admin的this BulkDeleteButton。我从中删除了不可撤消的功能，crudDeleteMany动作和红色样式。我添加的是以下各项的组合：

• 使用提供的导出器功能
• 带有回调的自定义crudGetMany操作，该回调使用返回的数据（有效负载）调用提供的导出器函数

结果称为BulkExportButton。它是全新仓库ra-extensions的第一部分。我建议您安装它（yarn add ra-extensions），然后就可以开始使用它了。

用法

import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { Datagrid, downloadCSV, List, TextField } from 'react-admin';
import { unparse as convertToCSV } from 'papaparse/papaparse.min';
import { BulkExportButton } from '../../../common/components';

const exporter = data => {
    const csv = convertToCSV({
        data,
        fields: ['id', 'b', 'c'],
    });
    downloadCSV(csv, 'somelist'); // download as 'somelist.csv` file
};

const BulkActionButtons = ({ resource, selectedIds }) => (
    <Fragment>
        <BulkExportButton
            resource={resource}
            selectedIds={selectedIds}
            exporter={exporter}
        />
    </Fragment>
);
BulkActionButtons.propTypes = {
    resource: PropTypes.string,
    selectedIds: PropTypes.array,
};

const SomeList = props => (
    <List
        {...props}
        bulkActionButtons={<BulkActionButtons />}
        exporter={exporter}
    >
        <Datagrid rowClick="edit">
            <TextField source="id" />
            <TextField source="b" />
            <TextField source="c" />
        </Datagrid>
    </List>
);

export default SomeList;

前往ra-extensions，以获取有关组件及其使用方式的反馈。