Таблица пользовательского интерфейса материала - Как сделать ячейки выбираемыми - PullRequest
Новая
       3

Таблица пользовательского интерфейса материала - Как сделать ячейки выбираемыми

0 голосов
/ 13 сентября 2018

Я работаю над планировщиком событий на неделю, где вы можете щелкнуть одну или несколько ячеек таблицы и добавить события к выбранным.Однако у меня проблемы с выбором каждой ячейки.Также я не знаю, как определить ячейку, в которой происходит щелчок по событию щелчка. 

class RegisterSchedule extends Component {

        handleClick = (event) => {
          if(prueba.length == 0 || !this.mismaFila(event) ){
            console.log(event.target);
            prueba.push(event.target);
            event.target.style.backgroundColor = '#b0b0b0';
          }
        }

        mismaFila(event){
          var mismaFila = false;
          prueba.map(element => {
            if(element.parentElement == event.target.parentElement) {
              mismaFila = true;
              return mismaFila;
            } else {
              mismaFila = mismaFila || false;
            }
          });
          return mismaFila;
        }

        Unir() {
            if(prueba.length > 1){
            prueba[0].rowSpan = prueba.length;
            prueba.map((element, i) => {
            if(i != 0){
              element.remove();
            }
          })
            prueba[0].style.backgroundColor ='#FFFFFF';
            prueba = [];
        }
        }

        Desunir() {
          prueba[0].rowSpan = 1;
          var row = document.createElement('TD');
          console.log(prueba[0].parentElement);
          prueba[0].parentElement.parentElement.appendChild(row)
        }

        render() {
            const { classes } = this.props;
            return (
              <Grid container justify = 'center' >

                <Grid item xs = { 8 } md = { 8 } >
                  <Paper className = { classes.root } >
                    <Table className = { classes.table } >
                      <TableHead >
                        <TableRow >
                          <TableCell className={classes.cell} > < /TableCell>
                          <TableCell className={classes.cell} > Lunes < /TableCell>
                          <TableCell className={classes.cell} numeric > Martes < /TableCell>
                          <TableCell className={classes.cell} numeric > Miercoles < /TableCell>
                          <TableCell className={classes.cell} numeric > Jueves< /TableCell>
                          <TableCell className={classes.cell} numeric > Viernes < /TableCell>
                       </TableRow>
                     </TableHead>
                     <TableBody > {
                         rows.map((row, i) => {
                            return (
                             <TableRow selectable className = { classes.row } key = { row.id } >
                               <TableCell className={classes.cell} component = "th" scope = "row" > 10:00 </TableCell>
                               <TableCell className={classes.cell} onClick = { this.handleClick }numeric > { row.calories } < /TableCell>
                               <TableCell className={classes.cell} onClick = { this.handleClick } numeric > { row.fat } </TableCell>
                               <TableCell className={classes.cell} onClick = { this.handleClick } numeric > { row.carbs } </TableCell>
                               <TableCell className={classes.cell} onClick = { this.handleClick } numeric > { row.protein } < /TableCell>
                               <TableCell className={classes.cell} onClick = { this.handleClick } numeric > { row.protein } < /TableCell>
                            </TableRow>
                        );
                    })
                } 
                   </TableBody>
                  </Table>
                </Paper>
                <Button onClick={this.Unir}>Unir</Button>
                <Button onClick={this.Desunir}>Desunir</Button>
              </Grid>
            </Grid>
            );
        }
    }

Это способ, которым я пытаюсь справиться с этим.Я не знаю, хорошая ли это практика, но я также не знаю, какой подход взять

1 Ответ

0 голосов
/ 14 сентября 2018

Это именно то, что вы хотите, и они имеют в своих демонстрационных компонентах в Material-UI

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

handleClick = (event, id, cell) => {
    const { selected } = this.state;
    const selectedCell = cell;

    this.setState({ selected: selectedCell });
  };

В этом случае выберите строку и добавьте ее в массив. Вам нужно добавить прослушиватель событий для каждого <TableCell />, чтобы выбрать ячейки вместо строк 

  <TableBody>
          {data
            .sort(getSorting(order, orderBy))
            .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
            .map(n => {
              const isSelected = this.isSelected(n.id);
              return (
                <TableRow
                  hover
                  role="checkbox"
                  aria-checked={isSelected}
                  tabIndex={-1}
                  key={n.id}
                  selected={isSelected}
                >
                  <TableCell padding="checkbox">
                    <Checkbox checked={isSelected} />
                  </TableCell>
                  <TableCell component="th" scope="row" 
                            padding="none"
                            onClick={event => this.handleClick(event, n.name)}
                            >
                    {n.name}
                  </TableCell>
                  <TableCell numeric
                  onClick={event => this.handleClick(event, n.calories)}>
                  {n.calories}
                  </TableCell>
                  <TableCell numeric
                  onClick={event => this.handleClick(event, n.id, n.fat)}>
                  {n.fat}</TableCell>
                  <TableCell numeric 
                            onClick={event => this.handleClick(event, n.id, n.carbs)}>
                  {n.carbs}</TableCell>
                  <TableCell numeric
                            onClick={event => this.handleClick(event, n.id, n.protein)}>{n.protein}</TableCell>
                </TableRow>
              );
            })}
          {emptyRows > 0 && (
            <TableRow style={{ height: 49 * emptyRows }}>
              <TableCell colSpan={6} />
            </TableRow>
          )}
        </TableBody>

А если вы хотите, чтобы пользователь просто выбрал одинячейку в каждом клике, просто удалите часть массива кода и просто выберите этот конкретный идентификатор и назначьте его переменной

...