react bootstrap表格table增删改查代码-html代码-BFW代码库

react bootstrap表格table增删改查代码

代码语言：html

所属分类：表格

代码描述：react bootstrap表格table增删改查代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">

    <style>
        body {
          padding: 1em;
        }
        
        .form-control {
          display: inline-block;
          max-width: 80%;
        }
        
        .react-table-container button {
          margin-bottom: 0.5em;
        }
        
        .react-table td button {
          margin-left: 1em;
        }
    </style>


</head>

<body>
    <div id="wrapper">
        <div id="app"></div>
    </div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babel.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.17.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.17.1.js"></script>
      <script type="text/babel">
       class IDGenerator {
  constructor() {
    this.count = 0
  }
  
  getID() {
    this.count++
    if (this.count === 10) {
      this.count = 0
    }
    return Date.now().toString() + this.count.toString()
  }
}

var uniqueID = new IDGenerator()

class ReactTableFieldInput extends React.Component {
  constructor(props) {
    super(props)
    
    this.state = { data: this.props.data }
    this.prevValue = this.props.data
    this.handleChange = this.handleChange.bind(this)
    this.handleKeyDown = this.handleKeyDown.bind(this)
    this.saveData = this.saveData.bind(this)
    this.cancelSave = this.cancelSave.bind(this)
  }
  
  componentDidMount() {
    this.refs.text.focus()
  }
  
  handleChange(e) {
    this.props.onChange(e.target.value)
  }
  
  handleKeyDown(e) {
    if (e.keyCode === 13) {
      this.saveData()
    } else if (e.keyCode === 27) {
      this.cancelSave()
    }
  }
  
  saveData() {
    this.prevValue = this.refs.text.value
    this.props.onSave()
  }
  
  cancelSave() {
    this.props.onChange(this.prevValue)
    this.refs.text.value = this.prevValue
    this.props.onSave()
  }
  
  render() {
    return ( <span>
        <input ref="text" className="form-control" type="text" value={this.props.data} onChange={this.handleChange} onKeyDown={this.handleKeyDown} />
      <button type="button" className="btn btn-primary" onClick={this.saveData}>OK</button>
      <button type="button" className="btn btn-danger" onClick={this.cancelSave}>X</button>
      </span> )
  }
}

class ReactTableField extends React.Component {
  constructor(props) {
    super(props)
    
    this.state = { data: this.props.data, editing: false }
    this.handleClick = this.handleClick.bind(this)
    this.handleChange = this.handleChange.bind(this)
    this.handleSave = this.handleSave.bind(this)
  }
  
  handleClick(e) {
    if (this.state.editing === false) {
.........完整代码请登录后点击上方下载按钮下载查看