AgGridDetailGrids.vue

<!--
 * AG-grid 细节网格细节配置
 * https://www.ag-grid.com/vue-data-grid/master-detail-grids/
 -->
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { AgGridVue } from 'ag-grid-vue3';
import Com from 'src/components';
import AG_GRID_LOCALE from 'src/config/ag-grid-locale';

const defaultColDef = {
  resizable: true,
  flex: 1,
  suppressMenu: false, // 是否禁用标题行菜单
};

const gridApi = ref<any>(null);
const gridColumnApi = ref<any>(null);
const detailCellGridApi = ref<any>(null);
const detailCellGridColumnApi = ref<any>(null);

const detailCellRendererParams = reactive({
  // 提供要在细节网格上使用的网格选项
  detailGridOptions: {
    localeText: AG_GRID_LOCALE,
    columnDefs: [
      {
        field: 'callId',
        headerName: '呼叫标识',
        checkboxSelection: true, // 给该列配置复选框
        headerCheckboxSelection: true, // 给该列标题栏设置复选框
      },
      { field: 'direction', headerName: '方向' },
      { field: 'number', headerName: '号码' },
      {
        field: 'duration',
        headerName: '持续时间',
        valueFormatter: 'x.toLocaleString() + "秒"',
      },
      { field: 'switchCode', headerName: '开关代码' },
    ],
    defaultColDef: {
      flex: 1,
      sortable: true,
    },
    rowSelection: 'multiple', // 多选
    suppressRowClickSelection: true, // 抑制行点击选择
    enableRangeSelection: true, // 启用范围选择
    // pagination: true,
    // paginationAutoPageSize: true,
    noRowsOverlayComponent: Com.AgGridNoRowsComponent,
    noRowsOverlayComponentParams: {
      dense: true,
    },
    loadingOverlayComponent: Com.AgGridLoadingOverlayComponent,
    onGridReady: (params: any) => {
      detailCellGridApi.value = params.api;
      detailCellGridColumnApi.value = params.columnApi;
    },
  },
  // 获得每个细节网格的行数
  getDetailRowData: (params: any) => {
    setTimeout(function () {
      params.successCallback(params.data.callRecords || []);
    }, 1000);
  },
});

const noRowsOverlayComponentParams = reactive({
  noRowsMessageFunc: () => '没有数据啦',
});

const state = reactive({
  columnDefs: [
    { field: 'name', headerName: '姓名', cellRenderer: 'agGroupCellRenderer' },
    { field: 'account', headerName: '帐户' },
    { field: 'calls', headerName: '呼叫' },
    {
      field: 'minutes',
      headerName: '分钟',
      valueFormatter: 'x.toLocaleString() + "分钟"',
    },
  ],
  rowData: [] as any,
});

onMounted(() => {
  setTimeout(() => {
    fetch('https://www.ag-grid.com/example-assets/master-detail-data.json')
      .then((result) => result.json())
      .then((remoteRowData) => {
        let arr = [...remoteRowData];
        state.rowData = remoteRowData.concat(arr);
        console.log('rowData', remoteRowData[0]);
      });
  }, 1000);
});

function onGridReady(params: any) {
  gridApi.value = params.api;
  gridColumnApi.value = params.columnApi;
}

function isRowMaster(dataItem: any) {
  let flag;
  if (dataItem && dataItem.callRecords && dataItem.callRecords.length > 0) {
    flag = true;
  } else {
    flag = false;
  }
  return flag;
}

function getSelectedRows() {
  const res = detailCellGridApi.value.getSelectedRows();
  console.log('获取选择行 ==', res);
}
</script>
<template>
  <div class="box">
    <div class="btns">
      <q-btn
        color="primary"
        label="获取选择的数据"
        no-caps
        @click="getSelectedRows"
      />
    </div>
    <!-- 
        rowSelection="multiple"：多选，按住control键多选；【control+shift+鼠标点击】可选中多行
        animateRows=true：启用行动画
        :masterDetail="true" 启用展开的细节网格行
        :isRowMaster="isRowMaster" 确定哪一个行该展开
        :noRowsOverlayComponentParams="noRowsOverlayComponentParams"
     -->
    <div class="ag-table">
      <ag-grid-vue
        style="height: 500px"
        class="ag-theme-alpine"
        :localeText="AG_GRID_LOCALE"
        :columnDefs="state.columnDefs"
        :rowData="state.rowData"
        :defaultColDef="defaultColDef"
        :animateRows="true"
        :masterDetail="true"
        :isRowMaster="isRowMaster"
        :detailCellRendererParams="detailCellRendererParams"
        :noRowsOverlayComponent="Com.AgGridNoRowsComponent"
        :noRowsOverlayComponentParams="noRowsOverlayComponentParams"
        :pagination="true"
        :paginationPageSize="5"
        @grid-ready="onGridReady"
      >
      </ag-grid-vue>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.btns {
  padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  column-gap: 10px;
}
.ag-table {
  padding: 0 10px 10px 10px;
}
</style>