表格行上鼠標懸停，出現操作列和操作按鈕

render() {
    let data = this.store.tableData.toJS();
    let cols = this.store.cols;
    const selectRow = {
      mode: 'checkbox',
      // bgColor: 'pink',
      className: 'select-col',
      selected: this.store.selectedRowID,
      onSelect: this.handleSelect,
      onSelectAll: this.handleSelectAll
    };
    return (
      <BootstrapTable data={ data }
                      // tableContainerClass="os-x"
                      bodyContainerClass="os-y"
                      maxHeight={this.state.height}
                      trClassName={ this.trClassFormat }
                      bordered={ false }
                      exportCSV={ false }
                      selectRow={selectRow}
                      pagination
                      remote
                      fetchInfo={{ dataTotalSize: this.store.page.totalPage * this.store.page.pageSize }}
                      options={{
                        noDataText: intl.get('No_Data'),
                        sizePerPage: this.store.page.pageSize,
                        alwaysShowAllBtns: true, // Always show next and previous button
                        page: this.store.page.curPage,
                        onPageChange: this.onPageChange,
                        sizePerPageList: [
                          {text: '10', value: 10},
                          {text: '20', value: 20},
                          {text: '50', value: 50},
                          {text: '100', value: 100}
                        ],
//控制鼠標已入移出，目的是獲得行id
                        onRowMouseOver: this.onRowMouseOver,
                        onRowMouseOut: this.onRowMouseOut
                      }}
      >
        {
          <TableHeaderColumn row='0' rowSpan='2' dataField='id' isKey editable={ false } hidden={ true }>id</TableHeaderColumn>
        }
        {
          cols.map((val,index)=>{
            if (val.enabled) {
              return (
                <TableHeaderColumn dataField={val.field} isKey={val.options.isKey} key ={index}
                                   editable={val.options.edit} columnClassName={val.options.className}
                                   headerAlign={val.options.align} width={val.options.width}
                                   dataFormat={(cell, row) => this.cellFormatter(cell, row, val.field, val.options.format, val.options.datatype)}>{val.name}</TableHeaderColumn>
              )
            }
          })
        }
//操作列
        <TableHeaderColumn key = {-1} columnClassName={"option-col"}
                           headerAlign="center" width={0}
                           dataFormat={(cell, row) => this.cellCustomFormatter(cell, row)}>{}</TableHeaderColumn>
      </BootstrapTable>
    )
  }

DOM結構如上。

 

操作列的方法代碼：

//獲得行id
onRowMouseOver = (row) => {
    // console.log(row)
    this.setState({
      showRowButtonId: row.id
    })
  }

  onRowMouseOut = (row) => {
    this.setState({
      showRowButtonId: row.id
    })
  }

//操作列的動態DOM
cellCustomFormatter=(cell,row)=>{
    // console.log(row)
    if (row.midvoucherstate==='已生成臨時憑證'){
      return (
        <div className={"option-btns"}>
          <span title={'查看臨時憑證'}
                onClick={this.handleViewVoucher.bind(this,row)}
                className="table-list-btn"
                aria-hidden="true"
                style={this.state.showRowButtonId===row.id?{}:{display: 'none'}}
          >
            查看臨時憑證
          </span>
          <span title={'重新生成憑證'}
                onClick={this.handleMakeVoucher.bind(this,row)}
                className="table-list-btn"
                aria-hidden="true"
                style={this.state.showRowButtonId===row.id?{}:{display: 'none'}}
          >
            重新生成憑證
          </span>
        </div>
      )
    }
      else{
      return null
    }


//行中的查看臨時憑證方法
  handleViewVoucher = (row) => {
    this.store.selectedRowID=[];
    this.store.selectedRowID.push(row.id);
    row && row.desbillid && this.store.validIds.push(row.desbillid);
    this.store.queryTemporary([], ()=>{
      // this.setState({
      //   showTemporary: true
      // })
      this.props.changeShowTemporary({showTemporary: true})
    });
  }
  //重新計算
  query = () => {
    this.store.queryData(()=>{
      this.store.selectedRowID = [];
      this.store.validIds = [];
      // this.store.tempIds = [];
    })
  }

//行中的重新生成臨時憑證方法
  handleMakeVoucher=(row)=>{
    this.store.selectedRowID=[];
    this.store.selectedRowID.push(row.id);
    row && row.desbillid && this.store.validIds.push(row.desbillid);
    this.store.calc(()=>{
      this.query();
    })
  }