agGrid组件

本组件基于yarn构建, 仅支持react版本

安装

npm i tf-react-ag-grid

引入

import TfReactAgGrid from 'tf-react-ag-grid'
import 'tf-react-ag-grid/dist/index.css'

属性说明

urls: {, // url相关配置, opts参考tf-request模块
  field: { url: 'xxx', opts: {dataType: 'jsonp'} },
  update: { url: 'xxx', opts: {dataType: 'jsonp'} }
}
wrapStyle: { height: "500px" }, // 最外层的style样式, 默认高度500px
hideIcon: false, // 是否隐藏右上角的那个icon图标
params: {}, // 发送给后端请求的数据, 目前需要2个字段参数: { gridName: 表名称, systemId: 所属系统id }
pageSize: 20, // 分页大小
formatColumn: null, // 格式化返回的rows数据: (rows) => {}
rowSelection: "single", // single(单选) multiple(多选)
rowDeselection: true, // 如果为true，则如果按住ctrl +单击该行，则将取消选择行
rowMultiSelectWithClick: false, // 设置为true以允许单击选择多行
enableColResize: true, // 设置为true以通过在列标题边缘拖动鼠标来允许列大小调整
hideFilter: true, //floatingFilter: false, //是否显示第二行搜索
floatingFiltersHeight: 28, // 第二行搜索的高度
rowHeight: 32, // 行的高度
headerHeight: 32, // 标题的行高度
hideSelection: false, // 隐藏选择框列
checkAll: false, // 是否显示全选框, 2个前提条件: (1)hideSelection == true; (2)rowSelection == "multiple"; 
cellRenderer: {}, // 单元格内容渲染, 如果该单元格不仅仅是单纯的显示内容, 而是有一些操作, 就需要用到此参数
selectFilter: {}, // 第二行的下拉过滤
headerRenderer: {}, // 列标题上面添加或做一些操作
pinnedCellRenderer: {}, // 行固定的单元格渲染, 必须配合pinnedBottomRowData一起使用

actionRenderer: null, // 在列表数据的前面添加一些自定义的列, 场景: 当后端没有返回operation操作字段时, 前端可以通过它自己添加操作列; ps: 支持传入: 方法(类), 对象, 数组对象

localeText: { // 文本
  noRowsToShow:
    '<span class="ag-grid-norows"><i class="ag-grid-iconfont ag-grid-icon-norows">&nbsp;</i><span>暂无相关数据</span></span>'
}

rowData: null, // 使用rowData数据渲染表格
getRows: (params) => { params.successCallback() }, // 异步渲染表格方法, rowData和getRows两者必须有一个

filterTextFormatter: (value) => value // 过滤文本的格式转换, ag-grid组件默认会转为小写

使用

// 组件使用
import React, {Component} from "react";

import TfReactAgGrid from 'tf-react-ag-grid'
import 'tf-react-ag-grid/dist/index.css'

import request from 'tf-request';

import TmiBizTransportNoCellRenderer from './components/test/TmiBizTransportNoCellRenderer'
import TmiBizLoadNoHeaderRenderer from './components/test/TmiBizLoadNoHeaderRenderer'
import TmiBizTransportNoPinnedRenderer from './components/test/TmiBizTransportNoPinnedRenderer'
import ActionRenderer from './components/test/ActionRenderer'

class App extends Component {
  state={
    bottomRowData: [] // bottomRowData必须是数组
  }
  getRows(params) {
    console.log('getRows', params);

    // 过滤相关
    console.log('filterModel', params.filterModel) 
    let filter = {};
    for (let i in params.filterModel) {
      if (params.filterModel[i]) {
        filter[i] = params.filterModel[i].filter;
      }
    }
    // 请求数据
    // request('/tmsMiWeb/waybillView/queryWaybill', {
    request('/tmsMiWeb/dischargeView/queryTransprotAndLoadListByTrans', {
        body: {
          startRow: params.startRow,
          pageSize: 10,
          ...filter
        }
    })
    .then(({ data }) => {
      // 合计
      this.setState({
        bottomRowData: this.handleBottomRowData('total2', data.sumRow)
      })
      // 回调, 渲染数据
      params.successCallback(data.rows, data.rowCount);
    })
    
  }
  // TmiBizTransportNoCellRenderer中调用了
  onDelete(item) {
    console.log('删除', item)
  }

  selectChanged() {
    this.setState({
      bottomRowData: this.handleBottomRowData('total2')
    });
  }
  handleCheckedTotal() {
    let rows = [].concat(this.table.api.getSelectedRows())
    
    // 这里只统计这几个字段, 忽略数据相加的精度问题
    let checkedData = {
      wayFeeCount: 0, 
      deliveryPayFeeCount: 0,
      agentFeeCount: 0,
      arrivalHandingCostCount: 0,
      totalGoodsNumberCount: 0,
      totalShippingFeeCount: 0,
      waybillCount: 0
    } 

    checkedData = rows.reduce((a, b) => {
      for(var i in b) {
        if (typeof a[i] == 'number') {
          a[i] = a[i] + b[i]
        } else {
          a[i] = ''
        }
      }
      return a;
    }, checkedData)

    checkedData.operation = '选中合计'

    return checkedData;
  }
  // 处理数据
  handleBottomRowData(flag, data) {
    if (flag == 'total') {// '总计'
      return [data]
    }

    if (flag == 'total2') { // '总计' 和 '选中合计'
      return [
        this.handleCheckedTotal(), 
        data || this.state.bottomRowData.slice(-1)[0]
      ]
    }
    
  }
  render() {
    let { bottomRowData } = this.state

    return (
      <div style={{margin: '200px'}}>
        <TfReactAgGrid
          ref={(table) => this.table = table}
          rowSelection="multiple"
          checkAll={true}
          params={{
            gridName: "工资统计表", 
            systemId: '2001',
            // gridName: "到站卸车配载单表", 
            // systemId: '1001'
          }}
          pageSize={10}
          getRows={this.getRows.bind(this)}
          hideFilter={false}
          
          cellRenderer={{
            operation: ActionRenderer(this),
            tmiBizTransportNo: TmiBizTransportNoCellRenderer(this)
          }}

          selectFilter={{
            tmiBizLoadNo: [
              '配送',
              '自提',
              {key: '1', label: '直送'}
            ]
          }}

          headerRenderer={{
            tmiBizLoadNo: TmiBizLoadNoHeaderRenderer(this)
          }}

          pinnedCellRenderer={{
            operation: (props) => <span>{props.value || '总计'}</span>,
            tmiBizTransportNo: TmiBizTransportNoPinnedRenderer(this)
          }}
          pinnedBottomRowData={bottomRowData}

          // actionRenderer={ActionRenderer(this)}
          // actionRenderer={{
          //   field: 'operat', 
          //   cellRendererFramework: ActionRenderer(this), 
          // }}

          onSelectionChanged={this.selectChanged.bind(this)}
        />
      </div>
    );
  }
};

命令

查看测试: npm start
打包: npm run build

文档

组件文档: https://www.ag-grid.com/javascript-grid-components/
比如: 
  cellRenderer(单元格渲染组件): https://www.ag-grid.com/javascript-grid-cell-rendering-components/
  pinnedRowCellRenderer(行固定组件): https://www.ag-grid.com/javascript-grid-row-pinning/
  headerComponent(标题组件): https://www.ag-grid.com/javascript-grid-header-rendering/
  floatingFilterComponent: https://www.ag-grid.com/javascript-grid-floating-filter-component/

api文档:
  https://www.ag-grid.com/javascript-grid-properties/
  https://www.ag-grid.com/javascript-grid-events/
  https://www.ag-grid.com/javascript-grid-callbacks/
  https://www.ag-grid.com/javascript-grid-api/
  https://www.ag-grid.com/javascript-grid-column-properties/
  https://www.ag-grid.com/javascript-grid-column-api/

更新日志

0.1.0
  版本发布

0.1.1, 0.1.2, 0.1.3, 0.1.5
  更新文档

0.1.7
  联调更新

0.1.9
  displayOrder width返回String的问题

0.2.3
  更改请求方式

0.2.5
  修复警告信息, 添加跳转方法