MUI DataGrid 过滤器服务器端 - 外部 API

问题描述 投票:0回答:0

我正在尝试从外部 API mui-datagrid 设置过滤器。我想从 mui QuickSearchToolbar 传递过滤器的值。在 Body raw 内部使用 Post 方法的外部 API 过滤器中:

example request in postman [here][1]:
https://pasteboard.co/fGf1rPTdVF8r.jpg

我想将值从 jsx 传递到内部 body raw('createdBy':{{Value}})并使用它调用 api 值并通过过滤器刷新数据网格。

我的 App.js :

import { Box, Container } from "@mui/material";
import { DataGrid, GridToolbarQuickFilter } from "@mui/x-data-grid";
import { useEffect, useState } from "react";
import { BASE_URL } from "../services/urls";
import jwtInterceptor from "../components/shared/jwtInterceptor";

const [searchInput, setsearchInput] = "";
const QuickSearchToolbar = () => {
  return (
    <Box
      sx={{
        p: 0.5,
        pb: 0,
      }}
    >
      <GridToolbarQuickFilter
        quickFilterParser={(searchInput) => setsearchInput(searchInput)}
      />
    </Box>
  );
};
function App() {
  const [pageState, setPageState] = useState({
    isLoading: false,
    data: [],
    total: 0,
    page: 0,
    pageSize: 5,
  });
  const [columns] = useState([
    {
      field: "id",
      headerName: "شناسه",
      flex: 1,
      minWidth: 120,
    },
    {
      field: "httpMethod",
      headerName: "متد درخواست",
      flex: 1,
      minWidth: 150,
    },
    {
      field: "createdBy",
      headerName: "نام شرکت",
      filter: "agTextColumnFilter",
      flex: 1,
      minWidth: 150,
    },
    {
      field: "uri",
      headerName: "آدرس یو آر ال",
      flex: 1,
      minWidth: 500,
    },
    {
      field: "responseBody",
      headerName: "بدنه پاسخ",
      flex: 1,
      minWidth: 600,
    },
    {
      field: "requestBody",
      headerName: "بدنه درخواست",
      flex: 1,
      minWidth: 400,
    },
    {
      field: "requestHeader",
      headerName: "هدر درخواست",
      flex: 1,
      minWidth: 400,
    },
    {
      field: "responseHeader",
      headerName: "هدر پاسخ",
      flex: 1,
      minWidth: 400,
    },
    { field: "requestTime", headerName: "زمان درخواست" },
    {
      field: "responseTime",
      headerName: "زمان پاسخ",
    },
    {
      field: "responseStatus",
      headerName: "وضعیت پاسخ",
    },
    {
      field: "responseException",
      headerName: "خطا",
    },
    { field: "createdAt", headerName: "زمان ایجاد" },
    { field: "updatedAt", headerName: "زمان بروز رسانی" },
    { field: "updatedBy", headerName: "کاربر بروز رسانی" },
  ]);

  useEffect(() => {
    const fetchData = async () => {
      setPageState((old) => ({ ...old, isLoading: true }));
      const response = await jwtInterceptor.post(
        `${BASE_URL}log/thirdPartyServices/filter?page=${pageState.page}&size=${pageState.pageSize}`,
        {
          httpMethod: "POST",
          createdBy: searchInput,
          uri: null,
          responseException: null,
          responseStatus: null,
        }
      );

      setPageState((old) => ({
        ...old,
        isLoading: false,
        data: response.data.content,
        total: response.data.totalPages,
      }));
    };

    fetchData();
  }, [pageState.page, pageState.pageSize]);

  return (
    <Box>
      <Container style={{ marginTop: 100, marginBottom: 100 }}>
        <DataGrid
          autoHeight
          rows={pageState.data}
          rowCount={pageState.total}
          loading={pageState.isLoading}
          rowsPerPageOptions={[10, 30, 50, 70, 100]}
          pagination
          page={pageState.page - 1}
          pageSize={pageState.pageSize}
          paginationMode="server"
          onPageChange={(newPage) => {
            setPageState((old) => ({ ...old, page: newPage + 1 }));
          }}
          onPageSizeChange={(newPageSize) =>
            setPageState((old) => ({ ...old, pageSize: newPageSize }))
          }
          columns={columns}
          components={{ Toolbar: QuickSearchToolbar }}
        />
      </Container>
    </Box>
  );
}
export default App;
reactjs react-hooks mui-datagrid
© www.soinside.com 2019 - 2024. All rights reserved.