09月12, 2016

React 动态添加一行数据(包括一行表格或者非表格)

React 在return中添加table不可以直接嵌套多个tr

react中的return函数添加表格,代码如下:

<table className="table table-striped table-hover table-bordered">
    <tr>
        <th>姓名</th>
        <th>手机号</th>
    </tr>
    <tr>
        <td>item1</td>
        <td>item2</td>
    </tr>
</table>

浏览器会报这样的错误; alt

react不会把DOM解析成thead和tbody这样的方式,

解决方式为手动添加,完整代码为:

export default React.createClass({
    render: function() {
        return(
            <div>
                <table className="table table-striped table-hover table-bordered">
                    <thead>
                    <tr>
                        <th>姓名</th>
                        <th>手机号</th>
                        <th>部门</th>
                        <th>角色</th>
                        <th>状态</th>
                        <th>证件类型</th>
                        <th>证件号</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>item1</td>
                        <td>item2</td>
                        <td>item3</td>
                        <td>item4</td>
                        <td>item5</td>
                        <td>item6</td>
                        <td>item7</td>
                        <td><a href="javascript:;">修改</a> | <a href="javascript:;">删除</a></td>
                    </tr>
                    </tbody>
                </table>
            </div>

        )
    }
})

但是遇到必须要添加一行的时候如何是好,或者更加奇怪但是很常见到的例子:

alt

这样问题不是经常见到,会看到它共同点很多,都是添加一行数据,但是保持在表格的结构里,却有一个非共同点,第一列的数据不发生改变,并且随着一行表格的增多,一直保持垂直居中。

解决方法

table中垂直方向合并单元格,除此单元格外,动态添加删除行 做法如下:

  • 合并第一个单元格,垂直方向;
  • 将其后的单元格全部合并,图片中合并了三个,水平方向
  • 根据bootstrap的栅格系统,可以讲其分为三组 代码如下,表示其中一行,放在一个td里面,这样react就不会报语法错误了:

    <div className="row row-padding">
      <div className="col-xs-7 row-height">
          <div className="col-xs-3 no-padding">
              <FormField.Number className="form-control"
                                decimalDigits={2}
                                value={model.start}
                                onChange={this.props.onChangeField("start",viewId).bind(this)}
                                disabled
              />
          </div>
          {
              models.indexOf(model) == 0 ?
                  <span className="col-xs-3 no-padding">元(包含)到</span> :
                  <span className="col-xs-3 no-padding">元(不包含)到</span>
          }
          <div className="col-xs-3 no-padding">
              <FormField.Number className="form-control"
                                decimalDigits={2}
                                value={model.end}
                                onChange={this.props.onChangeField("end",viewId).bind(this)}
              />
          </div>
          <span className="col-xs-3 no-padding">元(包含)</span>
      </div>
      <div className="col-xs-2 no-padding">
          <FormField.Number className="form-control"
                            decimalDigits={2}
                            value={model.addition}
                            onChange={this.props.onChangeField("addition",viewId).bind(this)}
          />
      </div>
      <div className="col-xs-3 row-height">
          {
              models.indexOf(model) == 0 ?
                  <a href="javascript:;" onClick={this.addRow.bind(this, model)}>增加分级</a> :
                  <a href="javascript:;" onClick={this.removeThis.bind(this, model)}>删除分级</a>
          }
    
      </div>
    </div>
    

本文链接:https://beacelee.com/post/react-dynamic-add-rows.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。