Редактирование таблицы материалов: одновременное редактирование всех строк - PullRequest
Новая
       17

Редактирование таблицы материалов: одновременное редактирование всех строк

3 голосов
/ 30 сентября 2019

У меня есть таблица с несколькими строками, и я хочу иметь возможность сделать их все редактируемыми одновременно. Используя редактируемый тег, я смог перейти в режим редактирования и сделать редактируемый по одной строке за раз, но если я переключаюсь с одной строки на другую, это не сохраняет изменений. Мне нужно остановиться и нажать на кнопку, чтобы сохранить изменения. Я хочу иметь возможность вносить изменения по всей таблице, прежде чем нажать кнопку Сохранить. Есть ли способ сделать это с помощью таблицы материалов? 

class Editable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      columns: [
        { title: 'Name', field: 'name' },
        { title: 'Surname', field: 'surname', initialEditValue: 'initial edit value' },
        { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
        {
          title: 'Birth Place',
          field: 'birthCity',
          lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
        },
      ],
      data: [
        { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
        { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
      ]
    }
  }

  render() {
    return (
      <MaterialTable
        title="Editable Preview"
        columns={this.state.columns}
        data={this.state.data}
        editable={{
          onRowUpdate: (newData, oldData) =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                {
                  const data = this.state.data;
                  const index = data.indexOf(oldData);
                  data[index] = newData;
                  this.setState({ data }, () => resolve());
                }
                resolve()
              }, 1000)
            }),
        }}
      />
    )
  }
}

1 Ответ

0 голосов
/ 03 октября 2019

У вас всегда есть возможность переопределить EditRow компонент и, например, добавить возможность сохранять строку, когда вы выходите из нее. Боюсь, что в настоящее время нет другого способа включить такую ​​функциональность.

...