javascript - 使用 Ag-Grid 过滤 1 个单元格中的 2 个数据
问题描述
我使用 Ag-Grid 在 1 个单元格中显示 2 个数据,我想为每个数据创建一个过滤器。过滤曾经处理一个数据,但现在我不再使用了。这是我的网格的屏幕截图: 界面
我想在彼此下方显示 2 个标题并向每个标题添加过滤器。这是我如何使用简单过滤的代码app-component.ts
:
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Grid, GridApi } from 'ag-grid-community';
import { AgGridAngular } from 'ag-grid-angular';
import { DealsService } from './services/deals.service';
import * as moment from 'moment';
import {DateCellRendererComponent} from 'src/app/date-cell-renderer/date-cell-renderer.component'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
title = 'app';
gridOptions = {
rowHeight :90,
headerHeight:60
}
columnDefs = [
{headerName: "Block \n Deal", cellRenderer: function(params){ return params.data.BLOCKID + '<br/>' + params.data.DEALID },width:150, resizable:true, filter: 'agNumberColumnFilter'} ,
{headerName: 'Class \n Type', cellRenderer: function(params){ return params.data.DEALCLASS + '<br/>' + params.data.DEALTYPE },width:150, resizable:true, filter: true} ,
{headerName: 'Trade \n Start',cellRendererFramework: DateCellRendererComponent ,width:150, resizable:true, filter: 'agDateColumnFilter' } ,
{headerName: 'Folder \n Cpty', cellRenderer: function(params){ return params.data.FOLDERSHORTNAME + '<br/>' + params.data.CPTYSHORTNAME },width:150, resizable:true, filter: true} ,
{headerName: 'ShortName \n Name', cellRenderer: function(params){ return params.data.INSTRSHORTNAME + '<br/>' + params.data.INSTRNAME },width:150, resizable:true, filter: true, } ,
{headerName: 'Quantity \n Settl.Amt',cellRenderer: function(params){ return params.data.QUANTITY + '<br/>' + params.data.SETTLEAMT },width:150, resizable:true, filter: 'agNumberColumnFilter'} ,
{headerName: 'Rate \n Fees', cellRenderer: function(params){ return params.data.FLOATINGRATESSHORTNAME + '<br/>' + params.data.RENTSPREADFIXEDRATE },width:150, resizable:true, filter: true} ,
{headerName: 'Category \n Status',cellRenderer: function(params){ return params.data.DEALCAT + '<br/>' + params.data.WORKFLOWSTATE },width:150, resizable:true, filter: true} ,
{headerName: 'End', field : 'ENDDATE',valueFormatter : this.dateFormatter,width:140, resizable:true, filter : 'agDateColumnFilter'}
];
rowData : any;
constructor(private service:DealsService) {
}
dateFormatter(params){
return moment(params.value).format('DD/MM/YYYY');
}
ngOnInit() {
this.service.getDealsList().subscribe(data => {
this.rowData = data;
}); }
}
这是我的app-component.html
:
<ag-grid-angular class="ag-theme-balham" ng-grid="gridOptions"
style="width: 1350px; height: 630px;"
class="ag-theme-alpine"
[rowData]="rowData"
[columnDefs]="columnDefs"
[gridOptions]="gridOptions"
[animateRows]="true"
[paginationPageSize]="10"
[pagination]="true"
>
</ag-grid-angular>
我真的很感谢你的帮助。
解决方案
嗯,我猜使用 ag-grid 过滤器是不可能的(我不是 100% 确定)。我认为只有使用custom filter component
推荐阅读
- git - 使用 Jenkins 中的 GIT 插件将代码签出到远程目录
- laravel-5 - Laravel 5.1 使用会话限制使用基于用户角色的 urls 用户的直接访问
- c++ - 使用 Eclipse C/C++ 在目标上构建
- javascript - 如何将 JavaScript 插入 Vue 文件
- python-2.7 - 在 Linux 上安装 Python ibm-db 驱动程序时出错
- gridview - 无法在 RadGrid EditTemplate 列中设置标签的文本值
- vba - 复制到另一张纸时出错
- c - ARM Cortex 上的超级简单 Tasker
- http - groovy - 下载带有身份验证的文件
- android - 如何在 SQLite 中对数据行求和?