feat:Ag Grid 表格扩展行学习

CHANGELOG.md

+## 2022-12-28
+
+- Ag Grid 表格扩展行学习
+
 ## 2022-12-25
 
 - 一言

src/modules/page9/IndexPage.vue

@@ -10,6 +10,7 @@ import SvgLineDrawingAnimation from './element/SvgLineDrawingAnimation.vue';
 import FlyingTextAnimationEffects from './element/FlyingTextAnimationEffects.vue';
 import TransformationAnimation from './element/TransformationAnimation.vue';
 import AgGridStudy from './element/AgGridStudy2.vue';
+import AgGridGroup1 from './element/AgGridGroup1.vue';
 
 const listData = [
   {
@@ -36,10 +37,14 @@ const listData = [
     title: 'AG grid',
     name: 'ag-grid-study',
   },
+  {
+    title: 'AG grid 分组1',
+    name: 'ag-grid-group1',
+  },
 ];
 const isShow = ref(true);
-const elementName = ref('ag-grid-study');
-const elementTitle = ref('');
+const elementName = ref('ag-grid-group1');
+const elementTitle = ref('AG grid 分组1');
 
 function onclick(data: any) {
   elementTitle.value = data.title;
@@ -77,6 +82,7 @@ function goBack() {
           v-if="elementName === 'transformation-animation'"
         />
         <ag-grid-study v-if="elementName === 'ag-grid-study'" />
+        <ag-grid-group1 v-if="elementName === 'ag-grid-group1'" />
       </div>
     </div>
     <div v-else>

src/modules/page9/element/AgGridGroup1.vue

+<!--
+ * 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';
+import 'ag-grid-enterprise';
+import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-alpine.css';
+
+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>