Ag网格自定义列复选框选择

时间:2019-07-05 02:58:42

标签: angular ag-grid

我已经创建了Ag网格客户标题和单元格渲染,以用于复选框选择,如下面的UI。我在标题组件中进行了复选框切换,但是基于复选框选择,也没有任何线索来反映单元格。

请专家提供建议吗?

enter image description here

自定义网格标题

 template: `
    <div>
    <span class="ag-filter-checkbox" (click) ="selectAll()">
      <i
        class="fa"
        [ngClass]="
        toggleCheckbox
            ? 'fa fa-lg fa-check-square-o'
            : 'fa-square-o fa-lg'
        "
      ></i>
    </span>
</div>

selectAll() {
    this.toggleCheckbox = !this.toggleCheckbox;
  }

组件TS

this.frameworkComponents = {
      agColumnHeader: AgGridCustomHeaderComponent,
      agColumnFilter: AgGridColumnFilter      
    };

this.gridOptions.api.setColumnDefs([
 {
        headerName: "checkbox",           
        field: "name", valueGetter: (params) => params.data.name.en,
        cellRendererFramework: AgGridCustomCellComponent,
        cellRendererParams: {
          ngTemplate: this.checkBox
        }
      }
]);

gridCellCheckBox(row: any) {
    var index = this.checked.indexOf(row.id);
    if (index > -1) {
      this.checked.splice(index, 1);        
    } else {         
      this.checked.push(row.id);
    }
  }

自定义复选框模板

<ng-template #checkBox let-row>
    <a href="javascript:void(0)" (click)="gridCellCheckBox(row)"><i
        [ngClass]="checked.includes(row.id) ? 'fa fa-check-square-o' : 'fa fa-square-o'"></i>{{row.name.en}}</a>
   </ng-template>

0 个答案:

没有答案