1

Пример взят с сайта devexpress.com и немного изменен: https://codesandbox.io/s/kmm02q66m5

Код из примера devexpress:

import React from "react";

import "devextreme/data/odata/store";
import DataGrid, { Column, FilterRow } from "devextreme-react/data-grid";

const dataSourceOptions = {
  store: {
    type: "odata",
    url: "https://js.devexpress.com/Demos/DevAV/odata/Products"
  },
  select: [
    "Product_ID",
    "Product_Name",
    "Product_Cost",
    "Product_Sale_Price",
    "Product_Retail_Price",
    "Product_Current_Inventory"
  ],
  filter: ["Product_Current_Inventory", ">", 0]
};

class App extends React.Component {
  render() {
    var columnList = [
      {
        dataField: "Product_ID",
        caption: "ID"
      },
      {
        dataField: "Product_Name",
        caption: "PRODUCT"
      },
      {
        dataField: "Product_Cost",
        caption: "COST",
        dataType: "number",
        format: "currency"
      },
      {
        dataField: "Product_Sale_Price",
        caption: "Sale Price",
        dataType: "number",
        format: "currency"
      },
      {
        dataField: "Product_Retail_Price",
        caption: "Retail Price",
        dataType: "number",
        format: "currency"
      },
      {
        dataField: "Product_Current_Inventory",
        caption: "Inventory"
      }
    ];
    return (
      <DataGrid
        dataSource={dataSourceOptions}
        showBorders={true}
        columns={columnList}
      >
        <FilterRow visible={true} />
      </DataGrid>
    );
  }
}

export default App;

При таких настройках почему-то не работает фильтрация (FilterRow). Кто-нибудь может подсказать, в чем здесь проблема?

1
  • Вопросы с просьбами помочь с отладкой («почему этот код не работает?») должны включать желаемое поведение, конкретную проблему или ошибку и минимальный код для её воспроизведения прямо в вопросе. Вопросы без явного описания проблемы бесполезны для остальных посетителей.
    – Kromster
    25 мар 2019 в 8:50

1 ответ 1

0

Для начала необходимо обратить внимание на код, приведенный в примере:

var columnList = [
  {
    dataField: "Product_ID",
    caption: "ID"
  },
  {
    dataField: "Product_Name",
    caption: "PRODUCT"
  },
  {
    dataField: "Product_Cost",
    caption: "COST",
    dataType: "number",
    format: "currency"
  },
  {
    dataField: "Product_Sale_Price",
    caption: "Sale Price",
    dataType: "number",
    format: "currency"
  },
  {
    dataField: "Product_Retail_Price",
    caption: "Retail Price",
    dataType: "number",
    format: "currency"
  },
  {
    dataField: "Product_Current_Inventory",
    caption: "Inventory"
  }
];

Самое важное здесь - это columnList, как видно из кода - это просто объекты. После попытки применить фильтрацию происходит сброс фильтра, на любой колонке. Я заглянул в примеры фильтрации: Filtering и увидел, что там используется компонент Column в качестве списка колонок, а не простой объект. Собственно, сам подход с получением данных извне меня не сильно устроил, поэтому я добавил получение данных через fetch. Рабочий пример кода:

import React from "react";

import "devextreme/data/odata/store";
import DataGrid, { Column, FilterRow } from "devextreme-react/data-grid";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      products: []
    };
  }

  componentDidMount() {
    const that = this;
    fetch("https://js.devexpress.com/Demos/DevAV/odata/Products")
      .then(function(response) {
        return response.json();
      })
      .then(function(data) {
        that.setState({ products: data.value });
      })
      .catch(console.log);
  };

  render() {
    var columnList = [
      <Column dataField="Product_ID" caption="ID" />,
      <Column dataField="Product_Name" caption="PRODUCT" />,
      <Column
        dataField="Product_Cost"
        caption="COST"
        dataType="number"
        format="currency"
      />,
      <Column
        dataField="Product_Sale_Price"
        caption="Sale Price"
        dataType="number"
        format="currency"
      />,
      <Column
        dataField="Product_Retail_Price"
        caption="Retail Price"
        dataType="number"
        format="currency"
      />,
      <Column dataField="Product_Current_Inventory" caption="Inventory" />
    ];

    return (
      <DataGrid dataSource={this.state.products} showBorders={true}>
        <FilterRow visible={true} applyFilter="auto" />
        {columnList}
      </DataGrid>
    );
  }
}

export default App;

Я добавил метод componentDidMount и в него поместил fetch, далее полученные данные сохранил в стейт, columnList теперь не протсо массив объектов, а массив компонент <Column />.

Пример того, как теперь работает фильтрация:

введите сюда описание изображения

Также обращу ваше внимание на один нюанс, внутри получаемых объектов через JSON, внутри каждого объекта есть два поля: Product_Image и Product_Primary_Image в которых приходят картинки, поэтому запрос работает с небольшой задержкой.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.