bee-table/src/ColumnManager.js

Table ui component for react

import React from 'react';
import Column from './Column';
import ColumnGroup from './ColumnGroup';
import Icon from 'bee-icon';

//行控制管理
export default class ColumnManager {
  _cached = {}
  static DefaultColumnWidth = 200;//缺省的列宽度
  constructor(columns, elements,originWidth,rowDraggAble,showRowNum) {
    columns = this.addDragHandleColumn(columns,rowDraggAble);
    columns = this.addOrderColumn(columns,showRowNum);
    columns = this.deleteColumnNotShow(columns);
    this.columns = columns || this.normalize(elements);

    this.originWidth = originWidth;
  }

  // 向数据列中添加一列:行拖拽标识
  addDragHandleColumn = (columns, rowDraggAble) => {
    if(!rowDraggAble){
      return columns
    }
    let dragHandleColumn =[{
      className: "drag-handle-column",
      title: "",
      key: "dragHandle",
      dataIndex: "dragHandle",
      width: 49,
      draggable: true,
      render: () => {
        return <Icon type="uf-navmenu" />
      }
    }]
    columns = dragHandleColumn.concat(columns);
    return columns;
  }

  // delete the column which does not show
  deleteColumnNotShow = (columns) => {
    let len = columns.length;
    for(let i=0; i < len; i++) {
      if(columns && columns[i] && columns[i].isShow === false){
        columns.splice(i,1);
        i--;
      }
    }
    return columns;
  }

  // 向数据列中添加一列:序号
  addOrderColumn = (columns, showRowNum) => {
    if(!showRowNum){
      return columns
    }
    let { key, fixed, width, name, type, base } = showRowNum;
    let order = {
      dataIndex: key || '_index',
      key:'_index',
      fixed:fixed || 'left',
      width:width || 50,
      title: name || '序号',
      render:(text, record, index)=>{
        switch( type ){
          case 'ascii':{
            return (String.fromCharCode((base || 'a').charCodeAt() + index));
          }
          case 'number':
          default:{
            return ( (base || 0) + index);
          }
        }
      }
    }
    if(columns.length > 0 && columns[0].dataIndex !== 'checkbox' && columns[0].dataIndex !== 'radio'){ // 多选表格/单选表格时放在第二列,其他情况放到第一列
      columns = [order].concat(columns);
    }
    else{
      columns.splice(1,0,order); // splice方法改变原数组,返回切割出的数组,此处为[]
    }
    return columns;
  }

  isAnyColumnsFixed() {
    return this._cache('isAnyColumnsFixed', () => {
      return this.columns.some(column => !!column.fixed);
    });
  }

  isAnyColumnsLeftFixed() {
    return this._cache('isAnyColumnsLeftFixed', () => {
      return this.columns.some(
        column => column.fixed === 'left' || column.fixed === true
      );
    });
  }

  isAnyColumnsRightFixed() {
    return this._cache('isAnyColumnsRightFixed', () => {
      return this.columns.some(
        column => column.fixed === 'right'
      );
    });
  }

  leftColumns() {
    return this._cache('leftColumns', () => {
      return this.groupedColumns().filter(
        column => column.fixed === 'left' || column.fixed === true
      );
    });
  }

  rightColumns() {
    return this._cache('rightColumns', () => {
      return this.groupedColumns().filter(
        column => column.fixed === 'right'
      );
    });
  }

  centerColumns() {
    return this._cache('centerColumns', () => {
      return this.groupedColumns().filter(
        column => !column.fixed
      );
    });
  }
  //全部末级列（多表头下）节点
  leafColumns() {
    return this._cache('leafColumns', () =>
      this._leafColumns(this.columns)
    );
  }

  leftLeafColumns() {
    return this._cache('leftLeafColumns', () =>
      this._leafColumns(this.leftColumns())
    );
  }

  rightLeafColumns() {
    return this._cache('rightLeafColumns', () =>
      this._leafColumns(this.rightColumns())
    );
  }
  centerLeafColumns() {
    return this._cache('centerLeafColumns', () =>
      this._leafColumns(this.centerColumns())
    );
  }

  //获取显示的列
  showLeafColumns(fixed) {
      let columns = [];
      if(fixed){
        if(fixed=='right'){
          columns = this.rightLeafColumns();
        }else{
          columns = this.leftLeafColumns();
        }
      }else{
        columns = this.centerLeafColumns();
      }
      let showColumns = columns.filter((col)=>col.ifshow==true);
      return showColumns;
  }

  // add appropriate rowspan and colspan to column
  groupedColumns(type) {
    return this._cache('groupedColumns', () => {
      const _groupColumns = (columns, currentRow = 0, parentColumn = {}, rows = []) => {
        // track how many rows we got
        rows[currentRow] = rows[currentRow] || [];
        const grouped = [];
        const setRowSpan = column => {
          const rowSpan = rows.length - currentRow;
          if (column &&
            !column.children && // parent columns are supposed to be one row
            rowSpan > 1 &&
            (!column.rowSpan || column.rowSpan < rowSpan)
          ) {
            column.rowSpan = rowSpan;
          }
        };
        columns.forEach((column, index) => {
          let defaultOpt= {
            ifshow:true
          }
          if(!this.originWidth){
            defaultOpt.width = ColumnManager.DefaultColumnWidth;
          }
          //获取非固定列
          if(type=='nofixed' && column.fixed){
            return false;
          }
          const newColumn = { ...defaultOpt,...column };
          rows[currentRow].push(newColumn);
          parentColumn.colSpan = parentColumn.colSpan || 0;
          if (newColumn.children && newColumn.children.length > 0) {
            newColumn.children = _groupColumns(newColumn.children, currentRow + 1, newColumn, rows);
            parentColumn.colSpan = parentColumn.colSpan + newColumn.colSpan;
          } else {
            parentColumn.colSpan++;
          }
          // update rowspan to all same row columns
          for (let i = 0; i < rows[currentRow].length - 1; ++i) {
            setRowSpan(rows[currentRow][i]);
          }
          // last column, update rowspan immediately
          if (index + 1 === columns.length) {
            setRowSpan(newColumn);
          }
          grouped.push(newColumn);
        });
        return grouped;
      };
      return _groupColumns(this.columns);
    });
  }

  normalize(elements) {
    const columns = [];
    React.Children.forEach(elements, element => {
      if (!this.isColumnElement(element)) return;
      const column = { ...element.props };
      if (element.key) {
        column.key = element.key;
      }
      if (element.type === ColumnGroup) {
        column.children = this.normalize(column.children);
      }
      columns.push(column);
    });
    return columns;
  }

  isColumnElement(element) {
    return element && (element.type === Column || element.type === ColumnGroup);
  }

  reset(columns, elements, showRowNum, rowDraggAble) {
    columns = this.addDragHandleColumn(columns,rowDraggAble);
    columns = this.addOrderColumn(columns,showRowNum);
    columns = this.deleteColumnNotShow(columns);
    this.columns = columns || this.normalize(elements);
    this._cached = {};
  }

  clearCache(){
    this._cached = {};
  }

  getColumnWidth(contentWidth){
    let columns = this.leafColumns();
    let res={computeWidth:0,lastShowIndex:-1};
    let centerShowColCount = 0;//中间区域的可见列个数
    columns.forEach((col,index)=>{
      //如果列显示
      if(col.ifshow){
        let width = col.width;
        if(typeof(width) == 'string' && width.includes('%') ){
          width = contentWidth *  parseInt(col.width) /100;
        }
        res.computeWidth += parseInt(width);
        if(!col.fixed){
          centerShowColCount++;
        }
      }
    })
    res.lastShowIndex = centerShowColCount-1;
    return res;
  }

  getLeftColumnsWidth(contentWidth=1) {
    return this._cache('leftColumnsWidth', () => {
       let leftColumnsWidth =0;
       this.groupedColumns().forEach(column =>{
        if (column.fixed === 'left' || column.fixed === true){
          let width = column.width;
          if(typeof(width) == 'string' && width.includes('%') ){
            width = contentWidth *  parseInt(column.width) /100;
          }
          leftColumnsWidth += parseInt(width)
        }
       });
       return leftColumnsWidth;
    });
  }

  getRightColumnsWidth(contentWidth=1) {
    return this._cache('rightColumnsWidth', () => {
      let rightColumnsWidth =0;
      this.groupedColumns().forEach(column =>{
       if (column.fixed === 'right'){
        let width = column.width;
        if(typeof(width) == 'string' && width.includes('%') ){
          width = contentWidth *  parseInt(column.width) /100;
        }
        rightColumnsWidth += parseInt(width)
       }
      });
      return rightColumnsWidth;
    });
  }
  getLeftColumnKeys() {
    return this._cache('leftColumnKeys', () => {
      return this.leftColumns().map((column)=>{
        return column.key||column.dataIndex
      })
    });
  }

  getRightColumnKeys() {
    return this._cache('rightColumnKeys', () => {
      return this.rightColumns().map((column)=>{
        return column.key||column.dataIndex;
      })
    });
  }
  //通过key或dataIndex查找匹配的列定义（支持多表头的列定义情况）
  findColumn(columnKey){
    return this._findColumn(columnKey,this.columns||[]);
  }

  _findColumn(columnKey,columns){
    for(let i=0;i<columns.length;i++){
      let findOne = null;
      let column = columns[i];
      if(!column)continue;
      if(column.key == columnKey || column.dataIndex == columnKey){//兼容只有key的情况
        findOne = column;
      }else{
        if (column.children) {
          findOne = this._findColumn(columnKey,column.children);
        }
      }
      if(findOne)return findOne;
    }
  }


  _cache(name, fn) {
    if (name in this._cached) {
      return this._cached[name];
    }
    this._cached[name] = fn();
    return this._cached[name];
  }

  //todo 含有children的宽度计算
  _leafColumns(columns) {
    const leafColumns = [];

    columns.forEach(column => {
      if (!column.children) {

        let defaultOpt= {
          ifshow:true
        }
        if(!this.originWidth){
          defaultOpt.width = ColumnManager.DefaultColumnWidth;
        }
        const newColumn = { ...defaultOpt,...column };
        leafColumns.push(newColumn);
      } else {
        leafColumns.push(...this._leafColumns(column.children));
      }
    });
    return leafColumns;
  }
}