react 关于ag-grid自定义pin

最近一直忙着做前端，我们公司用的是react，这里表格使用的是ag-grid，参见aggrid的官网https://www.ag-grid.com/documentation-main/documentation.php，发现想用自定义pin的话，只需要调用setColumnPined方法即可，但是我们必须拿到columnIpa，所以我们需要自定义一个CustomHeader文件放在frameworkComponents里面，如下图，这样便可以直接拿到aggrid的一下ipa，

自定义CustomHeader.js文件

在render的时候，将this.frameworkComponents通过props传给aggrid，OSAgGrid是我们自定义的文件，便于处理aggrid

通过props将所需的东西传给aggrid

OSAgGrid文件下，通过mergedProps接收上个页面传来的值

处理aggrid

customHeader.js

import React, { Component } from 'react';
import { Menu, Dropdown, message } from 'antd';
import arrow_up from '../../Resources/images/arrow_up.png';
import arrow_down from '../../Resources/images/arrow_down.png';
import icon_filter from '../../Resources/images/icon_filter.png';
import icon_menu from '../../Resources/images/icon_menu.png';

// let pinList = [];
export default class CustomHeader extends Component {
  constructor(props) {
    super(props);
    this.pinList = [];
    this.state = {
      ascSort: 'inactive',
      descSort: 'inactive',
      noSort: 'inactive',
    };
    props.column.addEventListener('sortChanged', this.onSortChanged.bind(this));
    this.onSortRequested = this.onSortRequested.bind(this);
    this.onPinClicked = this.onPinClicked.bind(this);
    this.onstopPropagation = this.onstopPropagation.bind(this);
    this.onMenuClicked = this.onMenuClicked.bind(this);
  }

  componentDidMount() {
    this.onSortChanged();
  }

  onstopPropagation(event) {
    event.stopPropagation();
  }

  onPinClicked(event) {
    event.domEvent.stopPropagation();
    const { props } = this.props.agGridReact;
    if (props.defaultGridConfigure && props.defaultGridConfigure.layout && props.defaultGridConfigure.layout.pinLists && props.defaultGridConfigure.layout.pinLists.length) {
      this.pinList = props.defaultGridConfigure.layout.pinLists;
    }
    if (event.key === 'no') {
      const num = this.getIndex(this.pinList, this.props.column.colId);
      if (num >= 0) {
        this.pinList.splice(num, 1);
      }
      this.props.columnApi.setColumnPinned(this.props.column.colId, null);
    } else if (event.key === 'reset') {
      this.pinList.forEach((pinModel) => {
        this.props.columnApi.setColumnPinned(pinModel.pinId, null);
      });
      this.pinList = [];
    } else {
      if (this.arrContantItem(this.pinList, this.props.column.colId)) {
        const num = this.getIndex(this.pinList, this.props.column.colId);
        if (num >= 0) {
          this.pinList.splice(num, 1);
        }
      }
      this.props.columnApi.setColumnPinned(this.props.column.colId, event.key);
      this.pinList.push({ pinId: this.props.column.colId, pinDireaction: event.key });
    }
    props.updatePinLists(this.pinList);
  }

  arrContantItem(arr, item) {
    let contantItem = false;
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].pinId === item) {
        contantItem = true;
      }
    }
    return contantItem;
  }

  getIndex(arr, pinId) {
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].pinId === pinId) {
        return i;
      }
    }
  }

  onMenuClicked(event) {
    event.stopPropagation();
    this.props.showColumnMenu(this.menuButton);
  }

  onSortChanged() {
    const {
      enableSorting,
    } = this.props;
    if (enableSorting) {
      this.setState({
        ascSort: this.props.column.isSortAscending() ? 'active' : 'inactive',
        descSort: this.props.column.isSortDescending() ? 'active' : 'inactive',
        noSort: !this.props.column.isSortAscending() && !this.props.column.isSortDescending() ? 'active' : 'inactive',
      });
    }
  }

  onMenuClick() {
    this.props.showColumnMenu(this.menuButton);
  }

  onSortRequested(event) {
    const {
      enableSorting,
    } = this.props;
    if (enableSorting) {
      if (!this.props.column.isSortAscending() && !this.props.column.isSortDescending()) {
        this.props.setSort('asc', event.shiftKey);
      } else if (this.props.column.isSortAscending()) {
        this.props.setSort('desc', event.shiftKey);
      } else if (this.props.column.isSortDescending()) {
        this.props.setSort('', event.shiftKey);
      }
    }
    const { agGridReact } = this.props;
    const sortModels = this.props.api.getSortModel();
    agGridReact.props.updateSortModel(sortModels[0]);
  }

  render() {
    const {
      enableMenu, enableSorting, displayName, column, agGridReact,
    } = this.props;
    let menu = null;
    if (enableMenu) {
      menu = (
        <img
          src={icon_filter}
          ref={(menuButton) => { this.menuButton = menuButton; }}
          className="customHeaderMenuButton"
          onClick={this.onMenuClicked}
        />
      );
    }

    let sort = null;
    if (enableSorting) {
      sort = (
        <div style={{ display: 'inline-block', marginLeft: 6 }}>
          <img src={column.isSortAscending() ? arrow_up : ''} />
          <img src={column.isSortDescending() ? arrow_down : ''} />
        </div>
      );
    }

    let pin = null;
    pin = (
      <img
        src={icon_menu}
        ref={(menuButton) => { this.menuButton = menuButton; }}
        className="customHeaderMenuButton"
        onClick={this.onstopPropagation}
      />
    );

    const SubMenu = Menu.SubMenu;

    const menuDown = (
      <Menu onClick={this.onPinClicked}>
        <SubMenu title="Pin Column">
          <Menu.Item key="left">Pin Left</Menu.Item>
          <Menu.Item key="right">Pin Right</Menu.Item>
          <Menu.Item key="no">No Pin</Menu.Item>
        </SubMenu>
        <Menu.Item key="reset">Reset Columns</Menu.Item>
      </Menu>
    );

    return (
      <div onClick={this.onSortRequested}>
        <Dropdown overlay={menuDown}>
          {pin}
        </Dropdown>
        <div style={{ display: 'inline-block', marginLeft: 6 }}>{displayName}</div> {sort}
        {menu}
      </div>
    );
  }
}

不光自定义了pin，还自定义了sort，同时处理了上传