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

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

作者: 家有饿犬和聋猫 | 来源:发表于2019-07-12 11:27 被阅读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

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/rfhekctx.html