时间戳

首页 > 解决方案 > 如何在 React 中为 material-tale 上的每一列实现自定义搜索远程数据

django - 如何在 React 中为 material-tale 上的每一列实现自定义搜索远程数据

问题描述

我想知道是否可以在 React 中为我的材料表数据中的每一列实现自定义搜索行？ 在此处输入图像描述

我想要一个函数，它使用在材料表中我的搜索过滤器中提交的数据调用我的 Django Rest api 的搜索函数，然后只显示匹配的数据。

基于材料表文档，我尝试实现customFilterAndSearch并将其传递term给自定义方法，该方法使用搜索词调用我的 Rest api，但customFilterAndSearch多次访问该方法。实际上，我达到了一个点，即我的表中的行数会调用 axios get 方法。

这是自定义customFilterAndSearch调用：

customFilterAndSearch: (term, rowData) => this.getDataFilterNomService(term, rowData) },

这是我使用的自定义方法：

async getDataFilterNomService(term, rowData){
    console.log("TermDinFilter", term)
    //console.log("rowDataDinFilter", rowData)
    try{
      let response = await axiosInstance.get('get/servicecatalog/filterNomService/', {
        params: {
          "nom_service":term
        }
      });
      console.log("Response la Filtru NomService", response)

    } catch(error){
        console.log("Error: ", JSON.stringify(error, null, 4));
        throw error;
    }

  }

这是当我尝试搜索类似“Viorel”的名称时如何调用 django

backend_1   | [11/Jun/2020 16:49:02] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:03] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:03] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:03] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:03] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:03] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:03] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:03] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:03] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:03] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:04] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:04] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:04] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:04] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:05] "GET /api/get/servicecatalog/filterNomService/?nom_service=Viorel HTTP/1.1" 200 968
backend_1   | [11/Jun/2020 16:49:05] "GET /api/get/servicecatalog/filterNomService/?

根据表中的条目数，它被调用了 18 次。

我想知道是否有一种方法可以覆盖customFilterAndSearch......所以当用户输入提交操作时，Django Api 只会被调用一次？

或者是否有另一种实现此功能的方法？

标签： djangoreactjsdjango-rest-frameworkmaterial-table

解决方案

我看了一下博客，我认为它可以改进。（如果我错了，请纠正我，因为我是新手）。我用来解决这个问题的方法是使用过滤器标题，我认为这比为此使用固定行更好。第 1 步：将过滤设置为 true

  options={{
    filtering: true
  }}

第 2 步：然后使用特定于列的过滤器渲染（您可以将其作为文本、选择、搜索...组件）。使用 Onchange,onBlur... 触发远程数据的 api 调用。

 columns = [ {
  field: 'one',
  title: 'One',
  filterComponent: (metaData) => {
    return (
      <input
        type='text'
        onBlur={e => {
          // console metaData and use it as per your wish
        }}
      />
    )
  }
},
{
  field: 'two',
  title: 'Two',
  filtering: false // if you dont want to have filter for any column -add this
}]

推荐阅读