zoukankan      html  css  js  c++  java
  • React 表格行点击事件

            <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';
      }
    
    
    

      

  • 相关阅读:
    Maven Build Alfresco Solr
    Docker Error response from daemon: manifest for alfresco/alfresco-search-services:latest not found: manifest unknown: manifest unknown
    Salesforce & Alfresco 数据权限机制
    Code Review & CodeFlow | Automated Code Review Tool
    An online request replication tool,session-replay
    低代码开发平台
    架构师成长系列 | 云原生时代的 DevOps 之道
    阿里专有云项目体验
    回顾《人月神话》,承认无知。
    Java应用调试利器——BTrace
  • 原文地址:https://www.cnblogs.com/zhanglanzuopin/p/12988475.html
Copyright © 2011-2022 走看看