Ag-Grid header组件添加自定义header模板

// 自定义header组件
class CustomHeaderComponent {
  // 构造函数，接收参数
  constructor() {
    this.eGui = document.createElement('div');
    this.eGui.innerHTML = `
      <div class="custom-header">
        <span class="header-text">自定义Header</span>
        <button class="header-button">按钮</button>
      </div>
    `;
    this.button = this.eGui.querySelector('.header-button');
    this.button.addEventListener('click', this.onButtonClick.bind(this));
  }

  // 获取header组件的DOM元素
  getGui() {
    return this.eGui;
  }

  // 按钮点击事件处理函数
  onButtonClick() {
    alert('按钮被点击了！');
  }
}

// 注册header组件
const gridOptions = {
  // 其他配置项...
  components: {
    agColumnHeader: CustomHeaderComponent
  }
};

// 列定义中使用自定义header组件
const columnDefs = [
  { headerName: '列1', field: 'col1', headerComponent: 'agColumnHeader' },
  { headerName: '列2', field: 'col2', headerComponent: 'agColumnHeader' },
  // 其他列定义...
];

// 创建Ag-Grid实例
new agGrid.Grid(document.querySelector('#myGrid'), gridOptions);

// 设置列定义
gridOptions.api.setColumnDefs(columnDefs);