码迷,mamicode.com
首页 > 其他好文 > 详细

React 表格行点击事件

时间:2020-05-29 17:37:17      阅读:113      评论:0      收藏:0      [点我收藏+]

标签:rowid   cli   ges   splay   evel   current   hang   parent   style   

        <Table
          dataSource={this.dataSources}
          columns={this.columns}
          onRow={(record) => {//表格行点击事件
            return {
              // onClick: this.clickRow.bind(this,record),
              onMouseEnter: this.clickRows.bind(this,record),
              onMouseLeave: this.clickRowss.bind(this,record)
            };
          }}
          onHeaderRow={(column, index) => {//表格行点击事件
            return {
              // onClick: this.clickRow.bind(this,record),
              onMouseEnter: this.clickRowsss.bind(this,column, index),
              onMouseLeave: this.clickRowssss.bind(this,column, index)

            };
          }}
          // bordered
          pagination={{
            // current: 1,
            current: this.state.pages, //当前页数     改变这个 就在改变页
            defaultCurrent: 1, //默认的当前页数
            pageSize: 20,
            // defaultPageSize: 1,
            onChange: this.onchange.bind(this),
            hideOnSinglePage: true
          }}
          // style = { display = this.state.cloudSource }
          className="cloudSourceAudit tablessa"
        />
  // ---------------------------------------------------------------------
  clickRows(record){
    document.getElementsByClassName(‘ant-table-row-level-0‘)[record[‘key‘]-1].style.background = ‘#516563‘;
    // document.getElementsByClassName(‘ant-table-thead‘)[0].style.background = ‘#516563‘;
  }
  clickRowss(record){
    document.getElementsByClassName(‘ant-table-row-level-0‘)[record[‘key‘]-1].style.background = ‘transparent‘;
    // document.getElementsByClassName(‘ant-table-thead‘)[0].style.background = ‘transparent‘;
  }
  clickRowsss(record,index){            //头部
    document.getElementsByClassName(‘ant-table-thead‘)[0].style.background = ‘#516563‘;
    document.getElementsByClassName(‘ant-table-thead‘)[1].style.background = ‘#516563‘;

  }
  clickRowssss(record,index){
    document.getElementsByClassName(‘ant-table-thead‘)[0].style.background = ‘transparent‘;
    document.getElementsByClassName(‘ant-table-thead‘)[1].style.background = ‘transparent‘;
  }

  clickRowsssss(record,index){
    // console.log("我是5",record,index,$(‘#tableId‘))
    // document.getElementsByClassName(‘ant-table-row-level-0‘)[0].style.background = ‘red‘;
    // document.getElementsByClassName(‘ant-table-row-level-0‘)[1].style.background = ‘red‘;
    
    for(var i=0; i<document.getElementsByClassName(‘ant-table-row-level-0‘).length; i++){
      document.getElementsByClassName(‘ant-table-row-level-0‘)[i].style.background = ‘transparent‘;
    }
    
    document.getElementsByClassName(‘ant-table-row-level-0‘)[record[‘key‘]-1].style.background = ‘#516563‘;

    // console.log(document.getElementsByClassName(‘ant-table-row-level-0‘),"测试",$(‘.ant-table-row-level-0‘)[record[‘key‘]-1])
    // this.setState({
    //   rowId: record.key,
    // });
    // $(‘.ant-table-row-level-0‘)[record[‘key‘]-1].siblings().style.background = ‘red‘;
  }


  

React 表格行点击事件

标签:rowid   cli   ges   splay   evel   current   hang   parent   style   

原文地址:https://www.cnblogs.com/zhanglanzuopin/p/12988475.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!