使用自定义查询过滤 Datagrid 组件 - react-admin

编程问答 2022-04-22

问题描述

我有一个使用自定义查询的数据网格组件，但我需要像组件一样使用过滤功能。

像这样： Filter React-admin

有可能吗？我不使用，因为我不能 - 或者我现在不 - 将此页面的两个组件使用 Json 数据。

我的代码：

import React,{useEffect,useState} from 'react';
import {List,Datagrid} from 'react-admin';

export const ArtEstadisticaDetalleList = (props) => {
   const [StateArticulo,setStateArticulo] = useState('');
   let location = useLocation()
   let IdArticulo = props.location.detail
   const dataProvider = useDataProvider();
   const [StateData,setStateData] = useState([]);

 useEffect(() => {
    dataProvider.getList(
        'ArtEstadisticaDetalle',{
            filter: {
                art: IdArticulo,},sort: {field: 'id',order: 'DESC'},pagination: {page: 1,perPage: 100},)
        .then(({data}) => {
            setStateData(data);
        })
        .catch(error => {
            console.log("Error Catch")
            console.log(error)
        })
},[]);

// i want to use this
const **MFiltro** = (props,data,ids,baspath) => (
    <Filter {...props}>
        {/*<VerTotales label="Totales" props={props} alwaysOn/>*/}
        <QuickFilter source="mensual" label="Mensual" defaultValue={90}/>
        <QuickFilter source="trimestral" label="Trimestral" defaultValue={90}/>
        <QuickFilter source="anual" label="Anual" defaultValue={90}/>
    </Filter>
);

const [page,setPage] = useState(1);
const [perPage,setPerPage] = useState(15);
const [sort,setSort] = useState({field: 'id',order: 'ASC'})

return (
    <div>
        <div style={{margin: '1em'}}>
            <GraficoBarrasLineaBasica
                wp_data_x={StateData}
            />
            <br/>
            <Datagrid
                data={keyBy(StateData,'id')}
                ids={StateData.map(({id}) => id)}
                currentSort={sort}
                setSort={(field,order) => setSort({field,order})}
                // <Filter {...props}>
                filter={{ paramFilter: 2 }} 
            >
                <TextField label="Artículo" source="art"/>
                <TextField label="CPT" source="t_cpt"/>
                ...
            </Datagrid>
        </div>
    </div>
)};    
export default ArtEstadisticaDetalleList;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

datagriddatagridfilterfilterreact-admin