Блог

Главная - Вопросы по программированию - ReactJS: как сделать выбор по умолчанию отмеченным в таблице материалов по умолчанию?

ReactJS: как сделать выбор по умолчанию отмеченным в таблице материалов по умолчанию?

#javascript #reactjs #material-ui #material-table

#javascript #reactjs #материал-пользовательский интерфейс #материал-таблица

Вопрос:

Я использую таблицу материалов react в своем проекте, и я хочу, чтобы выбор по умолчанию был отмечен. Как этого добиться??

 function BasicSelection() {
  return (
    <MaterialTable
      title="Basic Selection Preview"
      columns={[
        { title: 'Name', field: 'name' },
        { title: 'Surname', field: 'surname' },
        { 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 },
      ]}        
      options={{
        selection: true
      }}
    />
  )
}

Ответ №1:

вы можете его использовать.

 options={{
        selection: true,
        selectionProps: rowData => ({
          disabled: rowData.name === 'Mehmet',
          color: 'primary',
          checked: rowData.id === '1'
        })
      }}

Комментарии:

1. Это wroking. В чем проблема? selectionProps: rowData => ({ отключено: rowData.name === «Мехмет», цвет: «основной», проверено: rowData.id === 1 })

2. Я хочу установить флажок для всех строк при загрузке таблицы

3. вы можете отредактировать код «проверено: rowData.id === ‘1’ » к «проверено: true», вся строка будет проверена как true

4. Я сделал, но теперь его true и не может отменить выбор

Ответ №2:

Немного поздно, но если кому-то еще интересно:

Вы можете сделать это, используя управление состоянием и переопределение компонента таблицы материалов. Пожалуйста, обратите внимание, что вам нужно обрабатывать всю логику выбора самостоятельно.

 /* First define the selectedData state and set it to all data 
(the data that you are giving input to material table). 
This is where we are setting all data to by default checked. Like so: */

const [selectedData, setSelectedData] = useState(data);

Теперь нам нужно определить столбец для отображения флажка выбора. Мы не можем использовать функциональность выбора по умолчанию в таблице материалов. Давайте определим дополнительный столбец:

  <MaterialTable
      title="Conditional Selection Boxes Preview"
      columns={[
        { title: 'Name', field: 'name' },
        { title: 'Surname', field: 'surname' },
        { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
        { title: "SelectCheckbox",
          field: "surname",
          render: rowData => (
                <Checkbox
                  checked={
                    JSON.stringify(selectedData).indexOf(
                      JSON.stringify(rowData)
                    ) != -1
                  }
                  onChange={e => handleRowSelect(e, rowData)}
                />
              ),
         },
      ]}
      data={data}   
/>

Последний столбец — это наш столбец Select row (флажок для каждой строки). Мы снова используем поле фамилии, но вы можете использовать любое поле из ваших данных. Заголовок важен и будет использоваться позже для идентификации столбца выбора. Это поле дает нам доступ к rowData, который будет использоваться для выбора / отмены выбора строки с помощью обработчика событий onChange.

Наконец, нам нужно переопределить компонент заголовка:

     components={{
    Header: props => (
        <TableHead>
          <TableRow>
            {props.columns.map((column, idx) => {
              // return only the real columns
              return column.title != "SelectCheckbox" ? (
                <TableCell key={idx}>{column.title}</TableCell>
              ) : null;
            })}
            // return the Checkbox for select all
            <TableCell>
              <Checkbox
                checked={selectedData.length == data.length}
                onChange={handleSelectAllData}
              />
            </TableCell>
          </TableRow>
        </TableHead>
    ),
   }}

Теперь давайте напишем логику onChange:

  const handleSelectAllData = e => {
    if (e.target.checked) {
      setSelectedData(data);
    } else {
      setSelectedData([]);
    }
  };

  const handleRowSelect = (e, rowData) => {
    if (e.target.checked) {
      let tempArray = [...selectedData];
      tempArray.push(rowData);
      setSelectedData(tempArray);
    } else {
      setSelectedData(
        selectedData.filter(
          row => JSON.stringify(row).indexOf(JSON.stringify(rowData)) == -1
        )
      );
    }
  };

Ничего сложного. Я надеюсь, что любой, кто попадет на эту страницу, сможет следовать этому и решить свою проблему.