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

Question

我想知道是否可以在 React 中为我的 material-table 数据中的每一列实现自定义搜索行？

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

基于 material-table 文档，我尝试实现 customFilterAndSearch 并将 term 传递给调用我的 Rest api 的自定义方法使用搜索词但 customFilterAndSearch 多次访问该方法。实际上，我已经达到了这样一种程度，其中 axios get 方法被我 table.

中的行数所调用。

这是自定义 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;
    }

  }

下面是当我尝试搜索如下名称时调用 django 的方式："Viorel"

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 次...根据 table 上的条目数。

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

或者是否有其他方法可以实现此功能？

Answer 1

最终......我通过添加一个带有自定义字段的新行成功地使其工作 - 我写了一篇post关于我是如何做到的......也许它会对某人有所帮助。

Answer 2

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

  options={{
    filtering: true
  }}

第 2 步：然后使用特定于列的过滤器呈现（您可以将其作为文本、select、搜索...组件）。使用 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
}]

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

How to implement a custom search remote data for each column on material-tale in React

django

reactjs

django-rest-framework

material-table