agGrid组件

本组件基于yarn构建, vue版本

安装

npm i tf-vue-ag-grid

引入

import TfVueAgGrid from 'tf-vue-ag-grid'
import 'tf-vue-ag-grid/dist/tf-vue-ag-grid.css'

属性说明

参照tf-react-ag-grid文档

使用

<template>
  <div id="app">
     <TfVueAgGrid
      :getRows="getRows"
      ref="table"
      :hideFilter="false"
      rowSelection="multiple"
      :params="{
        gridName: '到站卸车配载单表', 
        systemId: '1001'
      }"
      :urls="{
        field: {url:'http://118.25.219.144:3000/mock/31/listnames', opts: {dataType: 'jsonp'}}
      }"
      :pageSize="10"
      :checkAll="true"

      :cellClicked="onCellClicked"

      :cellRenderer="{
        operation: ActionRenderer,
        tmiBizTransportNo: TmiBizTransportNoCellRenderer
      }"

      :selectFilter="{
        tmiBizLoadNo: [
          '配送',
          '自提',
          '直送'
        ]
      }"

      :headerRenderer="{
        tmiBizLoadNo: TmiBizLoadNoHeaderRenderer
      }"

      :pinnedCellRenderer="{
        operation: pinnedOperationRender
      }"
      :pinnedBottomRowData="bottomRowData"

      :selectionChanged="handleSelectChanged"
      />
  </div>
</template>

<script>
import TfVueAgGrid from 'tf-vue-ag-grid'
import 'tf-vue-ag-grid/dist/tf-vue-ag-grid.css'

import request from "tf-request";

import ActionRenderer from './test/ActionRenderer'
import TmiBizTransportNoCellRenderer from './test/TmiBizTransportNoCellRenderer'
import TmiBizLoadNoHeaderRenderer from './test/TmiBizLoadNoHeaderRenderer'
import pinnedOperationRender from './test/pinnedOperationRender'

export default {
  name: 'app',

  data() {
    return {
      bottomRowData: [],
      ActionRenderer, 
      TmiBizTransportNoCellRenderer, 
      TmiBizLoadNoHeaderRenderer, 
      pinnedOperationRender
    }
  },

  components: {
    TfVueAgGrid 
  },

  methods: {
    onCellClicked() {
      console.log('onCellClicked')
    },
    handleSelectChanged() {
      this.bottomRowData = this.handleBottomRowData('total2')
    },
    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.bottomRowData = this.handleBottomRowData('total2', data.sumRow)
        // 回调, 渲染数据
        params.successCallback(data.rows, data.rowCount);
        // params.failCallback()
      })
      
    },
    handleCheckedTotal() {
      let rows = [].concat(this.$refs.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.bottomRowData.slice(-1)[0]
        ]
      }
      
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

其它方法

命令

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

host: 127.0.0.1:3001 t2test.tf56.com
转发: http://t2test.tf56.com/tmsMiWeb http://176.122.141.63:3000/mock/16/tmsMiWeb

文档

组件文档: https://www.ag-grid.com/javascript-grid-components/

vue版本文档: 
  https://www.ag-grid.com/vue-getting-started/
  https://www.ag-grid.com/best-vuejs-data-grid/

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.2.0:
  添加初始值配置: selectedFilterVals和curPage
  例如: 
    <TfVueAgGrid
      :selectedFilterVals="{
        deliveryMethod: '配送'
      }"

      :curPage="3" // 会照成请求2次
    />

0.1.9: 
  添加jumpTo方法, refresh方法(没有效果)

0.1.0, 0.1.6
  版本发布

0.1.3
  后端联调