AgGridMaster.vue 3.25 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140
<!--
 * AG-grid 细节网格
 * https://www.ag-grid.com/vue-data-grid/master-detail/
 -->
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { AgGridVue } from 'ag-grid-vue3';

const defaultColDef = {
  resizable: true,
  flex: 1,
};

const gridApi = ref<any>(null);
const columnApi = ref<any>(null);
const detailCellRendererParams = reactive({
  // 提供要在细节网格上使用的网格选项
  detailGridOptions: {
    columnDefs: [
      { field: 'name', headerName: '姓名' },
      { field: 'remark', headerName: '备注' },
      { field: 'age', headerName: '年龄' },
    ],
    defaultColDef: {
      flex: 1,
    },
  },
  // 获得每个细节网格的行数
  getDetailRowData: (params: any) => {
    console.log('getDetailRowData params', params);
    params.successCallback(params.data.items || []);
  },
});

const state = reactive({
  columnDefs: [
    { field: 'year', headerName: '年份', cellRenderer: 'agGroupCellRenderer' },
    { field: 'age', headerName: '年龄' },
    {
      field: 'country',
      headerName: '国家',
    },
    {
      field: 'sport',
      headerName: '运动',
    },
    { field: 'gold', headerName: '金' },
    { field: 'silver', headerName: '银' },
    {
      field: 'bronze',
      headerName: '铜',
    },
  ],
  rowData: [] as any,
});

onMounted(() => {
  fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
    .then((result) => result.json())
    .then((remoteRowData) => {
      state.rowData = remoteRowData;
      state.rowData[0].items = [
        {
          name: '张三',
          remark: '法外狂徒张三',
          age: 18,
        },
        {
          name: '李四',
          remark: '张三的小弟',
          age: 17,
        },
        {
          name: '王五',
          remark: '张三舅舅',
          age: 54,
        },
        {
          name: '李大白',
          remark: '张三父亲',
          age: 50,
        },
        {
          name: '刘波',
          remark: '张三哥哥',
          age: 23,
        },
      ];
      console.log('rowData', state.rowData[0]);
    });

  // .then((remoteRowData) => (state.rowData = remoteRowData));
});

function cellWasClicked(event: any) {
  console.log('cellWasClicked >>>>', event);
}

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

function isRowMaster(dataItem: any) {
  let flag;
  if (dataItem && dataItem.items && dataItem.items.length > 0) {
    flag = true;
  } else {
    flag = false;
  }
  return flag;
}
</script>
<template>
  <div class="box">
    <!-- 
        rowSelection="multiple":多选,按住control键多选;【control+shift+鼠标点击】可选中多行
        animateRows=true:启用行动画
     -->

    <div>
      <ag-grid-vue
        style="height: 500px"
        class="ag-theme-alpine"
        :columnDefs="state.columnDefs"
        :rowData="state.rowData"
        :defaultColDef="defaultColDef"
        :isRowMaster="isRowMaster"
        :animateRows="true"
        :masterDetail="true"
        :detailCellRendererParams="detailCellRendererParams"
        @cell-clicked="cellWasClicked"
        @grid-ready="onGridReady"
      >
      </ag-grid-vue>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>