Django 如何为React中物料表上的每个列实现自定义搜索远程数据

我想知道是否有可能在React中为我的物料表数据中的每一列实现自定义搜索行？

我希望有一个函数，它调用Django Rest api的搜索函数，并在material表中的搜索过滤器中提交数据，然后只显示匹配的数据

基于物料表文档，我尝试实现

customFilterAndSearch

，并将

term

传递给一个自定义方法，该方法使用搜索项调用我的Rest api，但

customFilterAndSearch

多次访问该方法。实际上，我已经到了这样一个地步，即根据表中的行数和项目数调用axiosget方法

以下是custom

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是如何被调用的

它会被调用18次…根据表中的条目数

我想知道是否有方法覆盖

customFilterAndSearch

…因此，当用户输入提交操作时，Django Api只会被调用一次

---

或者是否有其他实现此功能的方法

最终。。。我通过添加一个带有自定义字段的新行成功地实现了这一点——我写了一篇关于我是如何做到这一点的文章……也许这会对某人有所帮助。

我查看了，我认为它可以改进。（如果我是新手，请纠正我的错误）。我用来解决这个问题的方法是使用过滤器头，我认为这比使用固定行要好。 步骤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
}]

列=[{
字段：“一”，
标题:"一",，
filterComponent：（元数据）=>{
返回(
{
//控制台元数据并根据您的意愿使用它
}}
/>
)
}
},
{
字段：“2”，
标题:"两个",，
筛选：false//如果您不想对任何列使用筛选-添加此
}]

嘿。。是的，使用固定标题而不是固定行的解决方案更好。我在实现分页时遇到了很多问题，因为又有一行破坏了分页计数器。同时，我已放弃实施我的申请材料表，但我将接受你的答复，因为这似乎是一个可行的解决方案。我相信有人会感谢你的帮助。非常感谢。

 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
}]