zoukankan      html  css  js  c++  java
  • 用react编写一个可以编辑的表格

    这只一个雏形,但是可以用了。难点是如何点击每行后面的编辑按钮,让当前行的格子都变成input。

    import {Component} from 'react'
    
    const Action = props => {
      console.log(props)
      return (
        <div>
          <button type='button' onClick={props.editCb}>{props.tr.edit
              ? '保存'
              : '编辑'}</button>
          <button type='button' onClick={props.tr.edit? props.saveCb: Number}>取消</button>
        </div>
      );
    };
    class Table extends Component {
      constructor(props, context) {
        super(props, context);
        this.state = {
          headers: {
            name: "名称",
            path: "路径映射",
            action: ""
          },
          trs: [
            {
              name: "定时任务",
              path: "/xxxx",
              action: "",
              edit: false
            }, {
              name: "定时任务2",
              path: "/yyyy",
              action: "",
              edit: false
            }
          ]
        };
      }
      onSave(data) {
        //点击取消按钮时还原该行为显示狀态
        data.edit = false
        if (data._initName !== undefined) {
          data.name = data._initName
          data.path = data._initPath
          //  data._initName = data._initPath = undefined
          this.forceUpdate()
        }
      }
      onEdit(data) {
        //点击取消按钮时还原该行为编辑狀态,再点击还原
        var editable = data.edit = !data.edit
        if (editable) {
          data._name = data.name
          data._initName = data.name
          data.name = <input
            defaultValue={data._name}
            onInput={(e) => {
            data._name = e.target.value;
          }}/>
          data._path = data.path
          data._initPath = data.path
          data.path = <input
            defaultValue={data._path}
            onInput={(e) => {
            data._path = e.target.value;
          }}/>
          this.forceUpdate()
        } else {
          data.name = data._name
          data.path = data._path
          this.forceUpdate()
        }
    
      }
      render() {
        var headers = this.state.headers || {};
        var keys = Object.keys(headers);
        console.log(headers);
        return (
          <table>
            <thead>
              <tr>
                {keys.map(key => <th>
                  {headers[key]}
                </th>)}
              </tr>
            </thead>
            <tbody>
              {this
                .state
                .trs
                .map(function (tr) {
                  return (
                    <tr>
                      {keys
                        .map(function (key, index) {
                          return (
                            <td key={key}>
                              {key === "action"
                                ? <Action
                                    tr={tr}
                                    saveCb={this
                                    .onSave
                                    .bind(this, tr)}
                                    editCb={this
                                    .onEdit
                                    .bind(this, tr)}/>
                                : tr[key]
    }
                            </td>
                          )
                        }, this)}
                    </tr>
                  )
                }, this)}
            </tbody>
          </table>
        )
      }
    }
    
    ReactDOM.render(<Table />, document.body)
    
    
  • 相关阅读:
    Saltstack的部署及其详解
    SSH免密远程登陆及详解
    LVS-负载均衡集群部署
    nginx的平滑升级
    MFS分布式文件系统管理
    cacti监控部署与配置
    Nagios部署与配置
    zabbix分布式监控的部署与win被控端
    Fail2防止sshd暴力破解
    C# 发邮件
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/7216279.html
Copyright © 2011-2022 走看看