通过 ag grid by 复选框显示选定的列

Question

我是 Angular 6 的新手，我必须以表格格式显示数据，所以我选择了 ag grid。

  <div class = "row">
    <div class = "col s8">
<ag-grid-angular
    #agGrid
    style="width: 50vw; height: 20vw;" 
    class="ag-theme-balham"
    [rowData]="rowData" 
    [defaultColDef]="defaultColDef"
    [columnDefs]="columnDefs"
    [enableColResize]="true"
    [rowSelection]="rowSelection"
    [groupSelectsChildren]="true"
    [enableSorting]="true"
    [enableFilter]="true"
    [animateRows]="true"
    [autoGroupColumnDef]="autoGroupColumnDef"
    [suppressRowClickSelection]="true"
    >
</ag-grid-angular>
</div>
<div class="col s4">
        <label>
                <input [(ngModel)]="make" type="checkbox" />
                <span>Maker</span>
              </label><br>
        <label>
         <input [(ngModel)]="model" type="checkbox" />
        <span>Model</span>
            </label><br>
        <label>
             <input [(ngModel)]="price" type="checkbox" />
                 <span>Price</span>
            </label><br>
            <br>
            <a class="waves-effect waves-light btn" (click) ="Dynamo()"><i class="material-icons left">cloud</i>Save</a>
</div>
</div>

在 ag-grid 的文档中（有点），他们有一个 grid 可以做到这一点，但我不知道必须添加什么来实现它。

查看名为“Example Filter API”的示例，您会看到单击列标题将显示类似“||||”的选项卡您可以在其中选择标题。如果有人知道如何添加此功能，将不胜感激。

这是我的组件（app.component.ts）的代码。我试图通过为字段添加复选框来模仿该功能。（Dynamo（）函数）

import { Component } from '@angular/core';
import { AgGridModule } from 'ag-grid-angular';
import { FormsModule } from '@angular/forms';

const staticColumnDefs = [
  {headerName: 'Make', field: 'make',checkboxSelection: true},
  {headerName: 'Model', field: 'model' },
  {headerName: 'Price', field: 'price', editable: false}
];
const staticRowData = [
  { make: 'Toyota', model: 'Celica', price: 35000 },
  { make: 'Ford', model: 'Mondeo', price: 32000 },
  { make: 'Porsche', model: 'Boxter', price: 72000 },
  { make: 'Maruti', model: 'Suzuki', price: 0 },
  { make: 'Volkswagen', model: 'Loki', price: 2000 },
  { make: 'Pagani', model: 'Thanatos', price: 172000 }
];
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  make = false;
  model = false;
  price = false;
  title = 'app';
  defaultColDef = {
    width: 180,
    editable: true,
    filter: "agTextColumnFilter"
  };
  sideBar = 'filters';
   startColumn =0;
   endColumn = 0;
  columnDefs = staticColumnDefs;
    header = ['make','model','price'];
    rowSelection = "multiple";
    autoGroupColumnDef = {
      headerName: "Make",
      field: "make",
      width: 200,
      cellRenderer: "agGroupCellRenderer",
      cellRendererParams: { checkbox: true }
    };

  rowData = staticRowData;
  Dynamo(){
    var arr = [];
    arr.push(this.make);
    arr.push(this.model);
    arr.push(this.price);
    var tempColumnDefs = [];
    var tempRowData = [
      { make: 'Toyota', model: 'Celica', price: 35000 },
      { make: 'Ford', model: 'Mondeo', price: 32000 },
      { make: 'Porsche', model: 'Boxter', price: 72000 },
      { make: 'Maruti', model: 'Suzuki', price: 0 },
      { make: 'Volkswagen', model: 'Loki', price: 2000 },
      { make: 'Pagani', model: 'Thanatos', price: 172000 }
    ];
    for( var i = 0;i<staticColumnDefs.length;i++)
      {
        if(arr[i])
        {tempColumnDefs.push(staticColumnDefs[i]);}
      }
      for( var i = 0;i<tempRowData.length;i++)
      {
        for(var j = 0;j<this.header.length;j++)
        {
          if(!arr[j])
          {
            console.log(j);
            delete tempRowData[i][this.header[j]];
          }
        }
      }

      this.columnDefs = tempColumnDefs;
   this.rowData = tempRowData;
   tempRowData = []
  }
}

如果这个问题太愚蠢或太菜鸟，我深表歉意。

Answer 1

关于column header menu，可以通过columnDef的menuTabs属性访问：

menuTabs: ["filterMenuTab", "generalMenuTab", "columnsMenuTab"]

1. generalMenuTab：包含在 menuTabs 数组中以显示主面板。
2. filterMenuTab：包含在menuTabs 数组中以显示过滤器面板。
3. columnsMenuTab：包含在menuTabs 数组中以显示列选择面板。

第二点正是你需要的。

另外，filter 菜单可以通过ToolPanel 访问

只需在 html 上附加 [sideBar]="sideBar" 属性并将其定义为：this.sideBar = "filters";，相同的属性可以通过 gridOptions.sideBar 直接访问