微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决React-admin 按 ReferenceManyField 中的自定义字段排序

遵循此处提出的建议:Get 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

但是,由于我正在排序的值(生成的计数值)在目标资源中不可用,因此我无法指定不同的字段

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

谢谢, 麦克

解决方法

我已经意识到(尽管可能很明显),如果原始资源中不存在我正在排序的字段,我将无法影响列表的排序。

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

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

所以实际上我正在尝试做一些不受支持的事情,但是如果 ReferenceFields 周围的文档可以明确表明 List/DataGrid 中的任何排序,这对我早期的理解会有所帮助总是发生在 getList() 数据提供者中,并且不可能真正对某个字段进行排序,除非它存在于该资源下并且数据提供者为您执行此操作。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。