ag-guid展开折叠

已于 2025-01-10 23:06:54 修改
阅读量107 收藏
点赞数 2
文章标签： javascript
于 2025-01-05 22:06:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28396865/article/details/144951817
版权

人民币格式

{
    field: "price",
    width: 120,
    valueFormatter: bracketsFormatter,
    editable: true,
  }

const formatCurrency = (num) => {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
const bracketsFormatter = (params) => {
  return params.value ? formatCurrency(params.value):'';
}

多条数据只显示一条的问题

const labelFormatter = (params) => {
  const arr = params.value.split(',')
  return params.value ? arr[1] : '';
}
const autoGroupColumnDef = {
  headerName: "Employee",
  width: 330,
  // pinned: "left",
  cellRenderer: "agGroupCellRenderer",
  // cellRenderer: "CustomGroupCellRenderer",
  // cellRendererParams: {
  //   suppressCount: true, //不显示子数据的数量
  // },
  valueFormatter: labelFormatter,
};

item.children.forEach(val => {
      const str = `${val.id},${val.name}`
      val.label = item.label.concat(str)
    })

多列展开折叠

{
    field: "fa",
    width: 120,
    wrapHeaderText: true,
    autoHeaderHeight: true,
    children: [
      {
        field: "y1",
        columnGroupShow: "closed",
        width: 80,
      },
      {
        field: "y2",
        width: 80,
        columnGroupShow: "open", 
      },
      {
        field: "y3",
        width: 80,
        columnGroupShow: "open", 
      },
      {
        field: "y4",
        width: 80,
        columnGroupShow: "open", 
      },
    ]
  },

版本

 "dependencies": {
    "ag-grid-enterprise": "33.0.2",
    "ag-grid-vue3": "33.0.2",
  },

修改icon

.ag-group-expanded,
.ag-group-contracted {
  order: 2;
}
.ag-group-expanded, .ag-group-contracted {
  position: relative;
}
.ag-icon.ag-icon-tree-open, .ag-icon.ag-icon-tree-closed {
  display: none !important;
}
.ag-group-expanded:after, .ag-group-contracted:after {
  position: absolute;
  left: 10px;
  top: 8px;
  height: 24px;
  width: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  box-shadow: 0px 2px 1px 0px #00000012;
  color: rgb(116, 134, 215);
}
.ag-group-expanded:after {
  content: "-";
}
.ag-group-contracted:after {
  content: "+";
}

全部代码

<script setup lang="ts">
// import HRExample from "./components/HRExample.vue";
import { ref } from "vue";
import { AgGridVue } from "ag-grid-vue3";
import CustomGroupCellRenderer from "./customGroupCellRendererVue.js";
import {
  AllCommunityModule,
  ClientSideRowModelModule,
  ModuleRegistry,
} from "ag-grid-community";
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-quartz.css";
import {
  ExcelExportModule,
  MasterDetailModule,
  RichSelectModule,
  RowGroupingModule,
  SetFilterModule,
  StatusBarModule,
  TreeDataModule,
} from "ag-grid-enterprise";
ModuleRegistry.registerModules([
  AllCommunityModule,
  ClientSideRowModelModule,
  ExcelExportModule,
  MasterDetailModule,
  RowGroupingModule,
  RichSelectModule,
  SetFilterModule,
  StatusBarModule,
  TreeDataModule,
]);
const { gridTheme, isDarkMode } = defineProps({
  gridTheme: {
    type: String,
    default: "ag-theme-quartz",
  },
  isDarkMode: {
    type: Boolean,
  },
});
const formatCurrency = (num) => {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
const bracketsFormatter = (params) => {
  return params.value ? formatCurrency(params.value) : '';
}

// const autoGroupColumnDef = ref<ColDef>({
const columnDefs = [
  // {
  //   headerName: "Label",
  //   field: "label",
  //   width: 120,
  // },
  // {
  //   field: "id",
  //   width: 120,
  // },
  {
    field: "name",
    width: 120,
  },
  {
    field: "fa",
    width: 120,
    wrapHeaderText: true,
    autoHeaderHeight: true,
    children: [
      {
        field: "y1",
        columnGroupShow: "closed",
        width: 80,
      },
      {
        field: "y2",
        width: 80,
        columnGroupShow: "open", 
      },
      {
        field: "y3",
        width: 80,
        columnGroupShow: "open", 
      },
      {
        field: "y4",
        width: 80,
        columnGroupShow: "open", 
      },
    ]
  },
  {
    field: "price",
    width: 120,
    valueFormatter: bracketsFormatter,
    editable: true,

  }
];
//     });
const list = [
  {
    id: 1,
    name: 'name111',
    age: 11,
    price: null,
    children: [
      {
        id: 2,
        name: 'name222',
        age: 22,
        price: 123455
      },
      {
        id: 3,
        name: 'name222',
        age: 33,
        price: 1234999
      },
      {
        id: 4,
        name: 'name444',
        age: 44,
        price: 1234
      }
    ]
  },
  {
    id: 1111,
    name: 'name111-222',
    age: 1122,
    price: 1234,
    children: [
      {
        id: 111222,
        name: 'name111-222222',
        age: 1122222,
        price: 1234
      }
    ]
  },
  {
    id: 3333,
    name: 'name3333-333333',
    age: 33333,
    price: 10000
  }
]
console.log(111, list);
let list2 = <any>[]
list.forEach(item => {
  console.log(122, item);
  item.label = item.name.split(',')
  if (item.children) {
    item.children.forEach(val => {
      const str = `${val.id},${val.name}`
      val.label = item.label.concat(str)
    })
    list2 = list2.concat(item.children)
  }
})
console.log(3, list2);

const all = list.concat(list2)

console.log(99, all);
const rowData = ref(all)

console.log(988, rowData.value);

const groupDefaultExpanded = -1;
const treeData = true;
const getDataPath = (data) => data.label;

const labelFormatter = (params) => {
  const arr = params.value.split(',')
  return params.value ? arr[1] : '';
}
const autoGroupColumnDef = {
  headerName: "Employee",
  width: 330,
  // pinned: "left",
  cellRenderer: "agGroupCellRenderer",
  // cellRenderer: "CustomGroupCellRenderer",
  // cellRendererParams: {
  //   suppressCount: true, //不显示子数据的数量
  // },
  valueFormatter: labelFormatter,
};


const themeClass = `${gridTheme}${isDarkMode ? "-dark" : ""}`;
const theme = "legacy";



// 使用示例
var number = 12345678;
var formatted = formatCurrency(number); // "123,456,789"
console.log(111112, formatted);


</script>

<template>
  <div class="wrapper">
    <div class="container11">
      <div class="grid" :class="themeClass">
        <ag-grid-vue :style="{ height: '500px' }" :theme="theme" :rowData="rowData" :columnDefs="columnDefs"
          :groupDefaultExpanded="groupDefaultExpanded" :getDataPath="getDataPath" :treeData="treeData"
          :autoGroupColumnDef="autoGroupColumnDef">
        </ag-grid-vue>
      </div>
    </div>
  </div>

  <!-- <HRExample /> -->
</template>
<style>
.ag-group-expanded,
.ag-group-contracted {
  order: 2;
}

.ag-group-expanded,
.ag-group-contracted {
  position: relative;
}

.ag-icon.ag-icon-tree-open,
.ag-icon.ag-icon-tree-closed {
  display: none !important;
}

.ag-group-expanded:after,
.ag-group-contracted:after {
  position: absolute;
  left: 10px;
  top: 8px;
  height: 24px;
  width: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  box-shadow: 0px 2px 1px 0px #00000012;
  color: rgb(116, 134, 215);
}

.ag-group-expanded:after {
  content: "-";
}

.ag-group-contracted:after {
  content: "+";
}

/* @import "ag-grid-community/styles/ag-grid.css";
@import "ag-grid-community/styles/ag-theme-quartz.css"; */
/* div.ag-theme-quartz,
div.ag-theme-quartz-dark {
  --ag-row-height: 65px !important;
  --ag-header-height: 48px;
  --ag-header-background-color: transparent;
  --ag-odd-row-background-color: rgb(244, 246, 251);
  --ag-border-color: rgba(140, 140, 140, 0.147);
  --ag-row-border-color: var(--ag-border-color);
} */

/* @media screen and (max-width: 720px) {
  div.ag-theme-quartz,
  div.ag-theme-quartz-dark {
    --ag-font-size: 12px;
    --ag-grid-size: 6px;
  }
}

div.ag-theme-quartz-dark {
  --ag-odd-row-background-color: #252f3f;
} */

/* .ag-theme-quartz .ag-root-wrapper,
.ag-theme-quartz-dark .ag-root-wrapper {
  border: none;
  border-bottom: 1px solid var(--ag-border-color);
  border-radius: 0px;
}

.ag-theme-quartz .ag-body,
.ag-theme-quartz-dark .ag-body,
.ag-theme-quartz .ag-sticky-top,
.ag-theme-quartz-dark .ag-sticky-top,
.ag-theme-quartz .ag-sticky-bottom,
.ag-theme-quartz-dark .ag-sticky-bottom {
  border-right: 1px solid var(--ag-border-color);
  border-left: 1px solid var(--ag-border-color);
} */

/* .ag-theme-quartz .ag-cell,
.ag-theme-quartz-dark .ag-cell {
  display: flex;
  align-items: center !important;
}

.ag-theme-quartz .ag-row-group,
.ag-theme-quartz-dark .ag-row-group {
  height: 100%;
  display: flex;
  align-items: center !important;
}

.ag-theme-quartz .ag-header,
.ag-theme-quartz-dark .ag-header {
  text-transform: uppercase;
  opacity: 0.7;
  font-size: 12px;
} */

/* .ag-theme-quartz .ag-pinned-left-header,
.ag-theme-quartz .ag-pinned-right-header,
.ag-theme-quartz-dark .ag-pinned-left-header,
.ag-theme-quartz-dark .ag-pinned-right-header {
  border-right: none;
  border-left: none;
}

.ag-theme-quartz .ag-header-cell-text,
.ag-theme-quartz-dark .ag-header-cell-text {
  letter-spacing: 1.1px;
  font-weight: 600;
} */

/* .ag-theme-quartz .ag-cell:not(:first-child),
.ag-theme-quartz-dark .ag-cell:not(:first-child) {
  border-left: 1px solid var(--ag-border-color);
}

.ag-theme-quartz .ag-group-expanded,
.ag-theme-quartz-dark .ag-group-expanded {
  opacity: 1;
} */

/* .ag-theme-quartz .ag-icon-tree-closed,
.ag-theme-quartz-dark .ag-icon-tree-closed {
  height: 24px;
  width: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  box-shadow: 0px 2px 1px 0px #00000012;
  color: rgb(116, 134, 215);
} */

/* .ag-theme-quartz .ag-icon-tree-open,
.ag-theme-quartz-dark .ag-icon-tree-open {
  height: 24px;
  width: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  box-shadow: 0px 2px 1px 0px #00000012;
  color: rgb(116, 134, 215);
} */

/* .grid {
  height: calc(
    100vh - var(--layout-grid-header-height) - var(--layout-grid-margin)
  );
  margin: var(--layout-grid-margin);
} */
</style>
qq_28396865
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值