时间戳

首页 > 解决方案 > 很好地格式化网格

javascript - 很好地格式化网格

问题描述

我正在尝试以“易于观察”的方式显示数据，但很难正确构建它。

我想将页面格式化如下：第一个网格包含 3 个文本字段，一个在另一个下方，并且在它们上方都有适当的标题。第二个网格与其他 3 个字段相同，第三个网格包含 7 个文本字段，我想在第一列中显示 -> 3，在第二列中显示 2，在第二列中显示 2 和最后一个，都在同一标题下。

如果我将所有最后 7 个字段放在同一个网格下，它们都出现在同一列中。现在它几乎可以工作了，但只有前 3 个文本字段正确地位于标题下方，而其他 4 个出现在不同的边距上。

这是我的代码：（如果有人有改进显示的想法，我很乐意听到它）

    <Grid container spacing={24}>
      <Grid item sm={3}> // First grid - contains 3 text fields
        <Typography variant="subheading" gutterBottom color="primary" >
          {labels.brokerGeneralDetails}
        </Typography>
        <Grid item sm={10}>
          <TextField
            ...
          />
        </Grid>
        <Grid item sm={2}>
          <TextField
            ...
          />
        </Grid>
        <Grid item sm={2}>
          <TextField
            ...
          />
        </Grid>
      </Grid>
      <Grid item sm={1}>  // Second grid - contains 3 text fields
        <Typography variant="subheading" gutterBottom color="primary">
          {labels.brokerAccountDetails}
        </Typography>
        <Grid item sm={6}>
          <TextField
           ...
          />
        </Grid>
        <Grid item sm={3}>
          <TextField
            ...
          />
        </Grid>
        <Grid item sm={2}>
          <TextField
            ...
          />
        </Grid>
      </Grid>
      <Grid item sm={3}>  // Third grid - Should contain 7 text fields in 3 columns
        <Typography variant="subheading" gutterBottom color="primary">
          {labels.brokerOtherDetails}
        </Typography>
        <Grid >
          <TextField
            ...
          />
        </Grid>
        <Grid item sm={2}>
          <TextField
            ...
          />
        </Grid>
        <Grid item sm={1}>
          <TextField
            ...
          />
        </Grid>
      </Grid>
      <Grid item sm={1}> // Should be the second column
        <Grid>
          <TextField
            ...
          />
        </Grid>
        <Grid >
          <TextField
           ...
          />
        </Grid>
      </Grid>
      <Grid item sm={1}> // Should be the third column
        <Grid>
          <TextField
          ...
          />
        </Grid>
        <Grid>
          <TextField
           ...
          />
        </Grid>
      </Grid>
    </Grid>

我希望它显示如下：

                    Title3          Title2       Title1
       Txt6   Txt4   Txt1          Txt1         Txt1
       Txt7   Txt5   Txt2          Txt2         Txt2
                     Txt3          Txt3         Txt3

现在是：

       Txt6   Txt4  Title3          Title2       Title1
       Txt7   Txt5   Txt1          Txt1         Txt1
                     Txt2          Txt2         Txt2
                     Txt3          Txt3         Txt3

标签： javascriptreactjsgridjsx

解决方案

花了一些时间后，我想我做到了：这里是代码框：https ://codesandbox.io/s/ll507vypy7

代码 ：

const styles = theme => ({
root: {
    flexGrow: 1
  },
  textField: {
    marginLeft: theme.spacing.unit,
    marginRight: theme.spacing.unit,
    width: 50
  }
});

class TextFields extends React.Component {
  render() {
    const { classes } = this.props;

    return (
      <div className={classes.root}>
        <Grid container>
          <Grid item container xs={4}>
            <Grid item xs={12}>
              <Typography variant="subheading" gutterBottom color="primary">
                Grid1
              </Typography>
            </Grid>
            <Grid item xs={12}>
              <TextField className={classes.textField} />
            </Grid>
            <Grid item xs={12}>
              <TextField className={classes.textField} />
            </Grid>
            <Grid item xs={12}>
              <TextField className={classes.textField} />
            </Grid>
          </Grid>
          <Grid item container xs={4}>
            <Grid item xs={12}>
              <Typography variant="subheading" gutterBottom color="primary">
                Grid2
              </Typography>
            </Grid>
            <Grid item xs={12}>
              <TextField className={classes.textField} />
            </Grid>
            <Grid item xs={12}>
              <TextField className={classes.textField} />
            </Grid>
            <Grid item xs={12}>
              <TextField className={classes.textField} />
            </Grid>
          </Grid>
          <Grid container item xs={4}>
            <Grid item xs={12}>
              <Typography variant="subheading" gutterBottom color="primary">
                Grid3
              </Typography>
            </Grid>
            <Grid container item xs={12}>
              <Grid item xs={4}>
                <TextField className={classes.textField} />
              </Grid>
              <Grid item xs={4}>
                <TextField className={classes.textField} />
              </Grid>
              <Grid item xs={4}>
                <TextField className={classes.textField} />
              </Grid>
            </Grid>
            <Grid container item xs={12}>
              <Grid item xs={4}>
                <TextField className={classes.textField} />
              </Grid>
              <Grid item xs={4}>
                <TextField className={classes.textField} />
              </Grid>
            </Grid>
            <Grid container item xs={12}>
              <Grid item xs={4}>
                <TextField className={classes.textField} />
              </Grid>
              <Grid item xs={4}>
                <TextField className={classes.textField} />
              </Grid>
            </Grid>
          </Grid>
        </Grid>
      </div>
    );
  }
}

PS 它是MATERIAL-UI

推荐阅读