时间戳

首页 > 解决方案 > React-admin 按 ReferenceManyField 中的自定义字段排序

reactjs - React-admin 按 ReferenceManyField 中的自定义字段排序

问题描述

遵循此处提出的建议：获取 ReferenceManyField Count？我在 react admin 中使用 ReferenceManyField，结合自定义字段来显示返回记录的计数，而不是参考中的任何特定数据字段

import * as React from "react";
import {Datagrid, List, TextField, NumberField, ReferenceManyField} from 'react-admin';

const ShowTotalField = props => <div>{props.total}</div>;

const TeamList = props => {
    return (
        <List {...props}>
            <Datagrid rowClick="edit">
                <TextField label="Team" source="teamName" />
                <ReferenceManyField label="Headcount" reference="reviews" source="teamName" target="team" link={false}>
                    <ShowTotalField />
                </ReferenceManyField>
                <TextField source="managerName" />
                <TextField source="parentTeam" />
                <NumberField source="averageTotal" />
            </Datagrid>
        </List>
    );
};

export default TeamList;

我的问题是我不知道如何通过自定义字段中的呈现值对 DataGrid 进行排序，即。计数。单击列标题并没有按照我期望的自然排序。

我可以查看文档以显示如何指定要从目标资源中排序的不同字段： https ://marmelab.com/react-admin/List.html#specifying-a-sort-field

但是，由于我正在排序的值（生成的计数值）在目标资源中不可用，因此我无法指定其他字段

如何实现能够按此生成值排序的行为？否则，设置资源或数据提供者以允许返回自定义计算值

谢谢，迈克

标签： reactjsreact-admin

解决方案

我已经意识到（尽管可能相当明显）如果我正在排序的字段在原始资源中不存在，我不能影响我的列表的排序。

我的用例可能相当独特，我使用提供的仅限本地的fake-rest组件，因为我故意希望数据只存在于浏览器中，除非导入/导出（没有网络或数据库来公开敏感数据）。如果我有一个更典型的后端服务来提供数据，我可以从后端提供“生成”的值，避免在浏览器中动态地进行，让 UI 自然地对它们进行排序。

所以我所做的是在我的自定义数据提供程序中进行一些相当hacky的东西，以使我在更新/创建/删除一个资源时保持同步的本地数据结构 - 然后调用另一个资源中的更新函数以通过新的“生成”的值。这让我可以在该字段上使用排序/分页/过滤，就好像它自然存在于该资源中一样。所以没有 ReferenceField 或自定义“ShowTotalField”，只是一个 NumberField。

所以真的我正在尝试做一些不受支持的事情，但是如果围绕ReferenceFields的文档可以清楚地表明 List/DataGrid 中的任何排序总是发生在 getList()数据提供者，并且不可能真正对字段进行排序，除非它存在于该资源下并且数据提供者为您完成。

推荐阅读