Question

我对6号角还很陌生，我不得不以表格格式显示数据，所以我选择了网格网格。

  <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，可以通过menuTabs的{{1}}属性对其进行访问：

columnDef

menuTabs: ["filterMenuTab", "generalMenuTab", "columnsMenuTab"]：包含在generalMenuTab数组中以显示主面板。

menuTabs ：包含在filterMenuTab数组中以显示过滤器面板。

menuTabs：包含在columnsMenuTab数组中以显示列选择面板。

第二点正是您所需要的。

此外，可以在ToolPanel上访问menuTabs菜单

只需在html上附加filter属性，然后像[sideBar]="sideBar"那样定义它，就可以通过this.sideBar = "filters";直接访问相同的属性

通过复选框通过ag网格显示选定的列

1 个答案: