表格(隔行变色,点击行,给表格头添加节点,自定义分页文案)

2019-07-12  本文已影响0人  家有饿犬和聋猫

子组件


import {Table} from 'antd';
import svg  from '../../../images/rev.png';

import React, { Component } from 'react';

export default class SourceTable extends Component {

    node1 = <div>法人股东数量(个)<img        onClick={p=>this.numClick(1)}  alt=""  src={svg} /></div>;
    node2 = <div>法人股东投资(万)<img  alt=""      onClick={p=>this.numClick(2)}   src={svg} /></div>;

    numClick(k){
        this.props.changeRankNum(k);
    }

    colum = [
        {
            title: '排名',
            dataIndex: 'order',
            key: 'order',
            render: (text, record, index)=>{
                return ((Number(this.props.current) - 1) * 5) + Number(index) + 1;    //序号
            }
        },
        {
            title: '省份',
            dataIndex: 'province',
            key: 'province'
        },
        {
            title: this.node1,
            dataIndex: 'legalPersonNum',
            key: 'legalPersonNum'
        },
        {
            title: this.node2,
            dataIndex: 'legalPersonFund',
            key: 'legalPersonFund'
        }
    ]; 
   
    render() {
        const {dataSour, onRowtab} = this.props;
        return (
            <div>
                <Table 
                    dataSource={dataSour}
                    columns={this.colum}
                    className="fance-lie"   // 列类名
                    pagination={false}
                    onRowClick={record=> this.props.onRowtab(record)}     
                    rowClassName={                 // 隔行变色
                        function(record, index){
                            let className = 'light-row';
                            if (index % 2 === 1) {className = 'dark-row';}
                            return className;
                        }
                    }
                            
                />
            </div>
        );
    }
}

父组件

  <SourceTable  current={currentPage}   onRowtab={this.onRowtabs}  dataSour={dataSour} changeRankNum={(k)=>this.changeRankNum(k)}   />   
//分页
 <Pagination
      total= {total}
       defaultPageSize={5}
        current={currentPage}
           showQuickJumper={true}
             itemRender={(current, type, originalElement)=>this.itemRender(current, type, originalElement)}
                onChange={(k)=>this.changePage(k)}
                 />
  
  onRowtabs=(k)=>{
       //获取点击行信息
        this.setState({
            provinceMsg: k
        });
    }

 changeRankNum(k){
        //按 投资人数量排序
        let {allDatalist, recordNum} = this.state;
        if(k === 1){
            if(recordNum > 0){
                this.setState({
                    allDatalist: [...allDatalist].sort((a, b)=>b.legalPersonNum - a.legalPersonNum),
                    currentPage: 1,
                    recordNum: 0
                }, ()=>{
                    this.changePage(1);
                });
                      
            }else{
                this.setState({
                    allDatalist: [...allDatalist].reverse(),
                    currentPage: 1,
                    recordNum: 0
                   
                }, ()=>{
                    this.changePage(1);
                });
            }
           
        }else if(k === 2){
             //按法人股东投资额排序
            if(recordNum === 0){
                this.setState({
                    allDatalist: [...allDatalist].sort((a, b)=>b.legalPersonFund - a.legalPersonFund),
                    currentPage: 1,
                    recordNum: Number(recordNum) + 1
                }, ()=>{
                    this.changePage(1);
                });
            }else{
                this.setState({
                    allDatalist: [...allDatalist].reverse(),
                    currentPage: 1,
                    recordNum: Number(recordNum) + 1
                }, ()=>{
                    this.changePage(1);
                });
            }
           
        }

    }

//自定义分页文案
 itemRender=(current, type, originalElement)=> {
        // console.log('current, type, originalElement', current, type, originalElement);
        if (type === 'prev') {
            return <a>上一页</a>;
        }
        if (type === 'next') {
            return <a>下一页</a>;
        }
        return originalElement;
    }
    changePage(k){
        console.log('current-page', k);
        this.setState({
            currentPage: k,
            dataSour:this.changeDataSour(this.state.allDatalist, k)
        });
    }
  
 changeDataSour(allData, page){
   
    let dataSource = [];
    dataSource = isArray(allData) ? [...allData].splice(Number(page * 5 ) - 5, 5) : [];
    return dataSource;
}

效果图

image.png
上一篇下一篇

猜你喜欢

热点阅读