tf-table-react

通用表格组件

安装/强依赖antd

npm install antd --save

npm install tf-table-react --save

引用

import TfTableReact from 'tf-table-react'

import 'tf-table-react/dist/index.min.css'

使用

index.js

  import React from "react";
 
  import './mock';
  import Request from 'tf-request';
 
  import antd from 'antd';
  import 'antd/dist/antd.css';
  import TfTableReact from './components';
 
  // 用户自定义组件
  import HeaderFilter from './usercomponents/HeaderFilter';
  import CellRender from './usercomponents/CellRender';
  import Operation from './usercomponents/Operation';
  import PinnedCellRenderer from './usercomponents/PinnedCellRenderer';
  import HeaderRender from './usercomponents/HeaderRender';
 
  class App extends React.Component {
    constructor(props){
      super(props);
      this.state = {
        onColumnChanged: (gridColumns) => {  // 表头有移动或变更后的回调
          console.log('gridColumns',gridColumns);
        },
        // 表头数据,其中 checkColumn 多选标签列和 operation 操作列，agOrder序号列，为固定字段，不可设为 fieldName
        // 新增 tooltipField 字段，若有，则以单列设置为最高优先，若没有，则以全局 tooltipField 为准，用法: tooltipField: true/false
        columnData: [], 
        rowData: null,  // 表格数据
        rowSelection: {
          hide: false, // 是否隐藏选择列
          type: 'multiple', // 多选模式，multiple 可多选，single 单选
          onSelectionChanged: (rowNodes) => { // 选中后回调
            console.log('rowNodes',rowNodes)  // 返回当前选中的rowNode
            console.log('allRowNOde',this.tftableRef.getAllRowNode());  // 返回所有当前分页的rowNodes
            console.log('getRowNode',this.tftableRef.getRowNode(0));  // 返回指定id的rowNode
            // setTimeout(()=>{   // 设定rowNodes 的选中状态
            //   // 取消选中
            //   this.tftableRef.setSelected(rowNodes,false);
            // },1000)
          }
        },
        rowOrder: { // 显示序号字段，字段名：agOrder
          hide: false,
          width: 100
        },
        rowOperation: {
          width: 300,
          hide: false, // 是否隐藏操作列, 默认true
          pinned: 'left',  // 操作列左右固定位置, left || right,  默认: right
          renderName: 'Operation',
          renderComponent: Operation,
          pinnedRowCellRenderer: 'Blank'  // 优先级高于renderComponent
        },
        headerFilter: { // key值要和columnData里的fieldName对应
          'field1': HeaderFilter.field1,
          'field3': HeaderFilter.field3
        },
        // headerRender: { agColumnHeader: HeaderRender }, // 自定义头部，该功能起效，那么headerFilter就自动失效
        headerFilterIcons: {  // 头部过滤自定义icon
          'field1': '<i class="ag-icon ag-icon-menu" style="color:#000"/>'
        },
        cellRenderer: { // 内容表格自定义显示
          'field1': CellRender.field1
        },
        cellStyle: (params) => {  // 自定义单元格样式
          if( params.data.id < 3 && params.column.colId != 'checkColumn' && params.column.colId != 'operation' ){
            return { backgroundColor: '#f00', color: '#fff' };
          }
        },
        cellClass: (params) => {  // 自定义单元格class名称
          // if( params.data.id == 3 ){
            return 'zpl-class'
          // }
        },
        pinnedRowCellRenderer: {  // 该数据的模板会覆盖 cellRenderer 里对应的模板，优先级最高，一般用于第一行作为筛选的场景
          'field1': PinnedCellRenderer,
          'field2': PinnedCellRenderer
        },
        context: { componentParent: this }, // 用于自定义注册组件子传父操作
        showFieldCheck: true,  // 是否显示右上角列过滤组件
        pagination: {
          hide : false, // 
          props : {   // 参考antd  pagination文档说明
            defaultCurrent: 1,
            total: 1, 
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: () => { return `共有20条` },
            onChange : (page, pageSize)=>{ 
              console.log('onChange',page, pageSize) 
              this.getData();
            },
            onShowSizeChange: (current, size)=>{ 
              console.log('onShowSizeChange',current, size) 
              this.getData();
            }
          }
        },
        pinnedTopRowData: [{'checkColumn':'筛选'}],
        pinnedBottomRowData: [{'checkColumn':'统计',field3:3,'hxl':1},{}],
        localeText: {
          noRowsToShow: '没有数据11', //  没有数据时的内容
          loadingOoo: 'Loading...'  // loading内容
        },
        tooltipField: false, // 是否设置鼠标上移单元格显示value
        // 右上角列表icon自定义图标
        fieldCheckIcon : <i className="ag-icon ag-icon-filter" style={{padding:'1px',fontSize:23}}/>,
      }
    }
 
    // 获取表头数据
    getForm = () => {
      Request('/mock/getForm').then(res => {
        if( res.code == 0 ){
          this.setState({
            columnData: [...res.module]
          })
          this.getData();
        }
      })
    }
 
    // 获以表格内容数据
    getData = () => {
      Request('/mock/getFormData').then(res => {
        if( res.code == 0 ){
          this.setState({
            rowData: res.module
          })
        }
      })
    }
 
    // 设置统计数据
    setBottomRowData = () => {
      const a = this.state.pinnedBottomRowData[0];
      const n = 'abc'+ Math.random()
      this.tftableRef.setPinnedBottomRowData([{...a,field4:n}]);
    }
 
    // 设置筛选数据
    setTopRowData = () => {
      this.tftableRef.setPinnedTopRowData([{checkColumn: "筛选"}]);
    }
 
    componentDidMount = () => {
      this.getForm();
    }
 
    callbackComponents = (data) => {
      this.getData();
    }
 
    render() {
      return (
        <div style={{width: '90vw',height: '90vh'}}>
          <TfTableReact { ...this.state } ref={tftableRef => this.tftableRef = tftableRef}/>
        </div>
      );
    }
  };
 
  export default App;

HeaderFilter/field1.js

  import React, {Component} from "react";
  import { Button,DatePicker } from 'antd';
  import './index.less';
 
  export default class Field1 extends Component {
      constructor(props) {
        super(props);
        console.log('field1 props',props);
      }
 
      isFilterActive= () => {}
 
      onChange = () => {
        console.log('date change');
        // 调用父组件方法
        this.props.context.componentParent.getData()
      }
 
      getCalendarContainer = () => {
        return this.$box
      }
 
      render() {
        return (
          // antd DatePicker组件比较特殊，需要给它指定自己的外层div
          <div ref={$box => this.$box = $box} style={{padding:10}}>
            <DatePicker size="small" getCalendarContainer={this.getCalendarContainer} onChange={this.onChange} />
            <Button size="small">确定</Button>
          </div>
        );
      }
  };

参数说明

参数名	默认值	说明	备注
<!--	columnData	[]	表头数据,其中 checkColumn 多选标签列和 operation 操作列为固定字段，不可设为 fieldName