带有迷你图的Ag网格树？

Question

我正在尝试在 ag-grid 的树上使用迷你图。有没有办法做到这一点？ aggFunc 被调用，但结果似乎没有被使用。我还尝试在树本身上设置值，但这不起作用。

Answer 1

我通过使用

innerRenderer

和

cellRendererSelector

，然后使用渲染 SVG 的

GanttCellRenderer

组件来实现此功能：

网格定义的相关部分：

cellRenderer: 'agGroupCellRenderer',
cellRendererParams: {
  suppressCount: true,
  // This innerRenderer is used by group items and then the params are as defined by cellRendererSelector
  // Without this innerRenderer here, the group items will not show the gantt chart
  innerRenderer: 'GanttCellRenderer',
  suppressDoubleClickExpand: true,
  suppressEnterExpand: true,
},
// This function does the aggregates for group rows. That array gets stored internally by AgGrid as params.value
// and is used by cellRendererSelector
aggFunc: (params => monthAggregate(params, month)),
editable: false,
// columnGroupShow: 'open', // Does not work unless we have a column that is open on the left...
suppressMenu: true,
sortable: false,
suppressMovable: true,
cellRendererSelector: (params) => {
  return {
    component: GanttCellRenderer,
    params: {
      topWidthPct: parseFloat(params.value[0]),
      bottomWidthPct: parseFloat(params.value[1])
    },
  }
},

GanttCellRenderer

的相关部分：

<template>
  <div class="gantt-cell" @mouseover="showTooltip($event, params)" @mouseout="hideTooltip($event, params)">
    <svg v-if="topWidth || bottomWidth" height="34" width="35.5" viewBox="0 0 35.5 34" xmlns="http://www.w3.org/2000/svg">
      <g v-if="topWidth" transform="translate(-0.75, 4)" >
        <rect height="14" :width="topWidth" :fill="topFill"/>
      </g>
      <g v-if="bottomWidth" transform="translate(-0.75, 22)" >
        <rect height="14" :width="bottomWidth" :fill="bottomFill"/>
      </g>
    </svg>
  </div>
</template>
<script setup>
import {defineProps, onMounted, ref} from "vue";
import { useGanttTooltipStore } from "@/stores/gantt_tooltip_store";

const props = defineProps({
  params: Object
})

const topFill = ref(null)
const bottomFill = ref(null)

const fullWidth = 35.5; // 34px is full width + .75px times 2 to cover borders -- max border width is 1.5px
const topWidth = ref(null)
const bottomWidth = ref(null)

onMounted(() => {
  topFill.value = props.params.node?.allChildrenCount ? '#989CA7' : '#4A5FD5'
  bottomFill.value = props.params.node?.allChildrenCount ? '#B8B6CA' : '#84CADE' // $paleBlue1 : $lightBlue1

  topWidth.value = props.params.topWidthPct ? (fullWidth * parseFloat(props.params.topWidthPct)) : 0
  bottomWidth.value = props.params.bottomWidthPct ? (fullWidth * parseFloat(props.params.bottomWidthPct)) : 0
})