Я пытаюсь создать сетку данных ясности с помощью конфигурации json.
values:any = {
columns:[
{
id:'name',
type:'text',
value:'Name',
isFilterable:true,
inputs:{}
},
{
id:'class',
type:'select',
value:'Class',
isFilterable:false,
inputs:{
values:['COE','SEM','MEC'],
selectModel:'hello'
}
},
{
id:'play',
type:'text',
value:'Play',
isFilterable:false,
inputs:{}
},
{
id:'status',
type:'text',
value:'Status',
isFilterable:true,
inputs:{}
}
],
rows:[
{
name:{type:'text',inputs:{},value:'Varun'},
class:{type:'text',inputs:{},value:'COE'},
play:{
type:'modal',
inputs:{
modalText:'Play',
modalTitle:'Playing',
modalBody:'Tired now'
},
value:''
},
status:{type:'text',inputs:{},value:'Done'}
},
{
name:{type:'text',inputs:{},value:'Arsh'},
class:{type:'text',inputs:{},value:'SEM'},
play:{
type:'modal',
inputs:{
modalText:'Play',
modalTitle:'Playing',
modalBody:'Tired now'
},
value:''
},
status:{type:'text',inputs:{},value:'Pending'}
},
{
name:{type:'text',inputs:{},value:'Arjun'},
class:{type:'text',inputs:{},value:'MEC'},
play:{
type:'modal',
inputs:{
modalText:'Play',
modalTitle:'Playing',
modalBody:'Tired now'
},
value:''
},
status:{type:'text',inputs:{},value:'Done'}
},
{
name:{type:'text',inputs:{},value:'Rishab'},
class:{type:'text',inputs:{},value:'COE'},
play:{
type:'modal',
inputs:{
modalText:'Play',
modalTitle:'Playing',
modalBody:'Tired now'
},
value:''
},
status:{type:'text',inputs:{},value:'Rejected'}
},
{
name:{type:'text',inputs:{},value:'Appy'},
class:{type:'text',inputs:{},value:'SEM'},
play:{
type:'modal',
inputs:{
modalText:'Play',
modalTitle:'Playing',
modalBody:'Tired now'
},
value:''
},
status:{type:'text',inputs:{},value:'Done'}
},
{
name:{type:'text',inputs:{},value:'Varun'},
class:{type:'text',inputs:{},value:'COE'},
play:{
type:'modal',
inputs:{
modalText:'Play',
modalTitle:'Playing',
modalBody:'Tired now'
},
value:''
},
status:{type:'text',inputs:{},value:'Done'}
},
{
name:{type:'text',inputs:{},value:'Arka'},
class:{type:'text',inputs:{},value:'COE'},
play:{
type:'modal',
inputs:{
modalText:'Play',
modalTitle:'Playing',
modalBody:'Tired now'
},
value:''
},
status:{type:'text',inputs:{},value:'Pending'}
},
],
footer:{
pageSizeList:[5,10,15,20],
item:'students'
}
}
Мой html-код выглядит как
<clr-dg-column *ngFor="let column of columns">
<div [ngSwitch] = "column.type">
<div *ngSwitchCase="'text'">
{{column.value}}
<clr-dg-string-filter (click)="gridFilter.columnId=column.id" *ngIf="column.isFilterable" [clrDgStringFilter]="gridFilter"></clr-dg-string-filter>
</div>
<div *ngSwitchCase="'select'">
<lcm-select-box [values]="column.inputs.values"
[selectModel]="column.inputs.selectModel"></lcm-select-box>
</div>
</div>
</clr-dg-column>
<clr-dg-row *clrDgItems="let row of rows">
<clr-dg-cell *ngFor="let column of columns">
<div [ngSwitch]="row[column.id].type">
<div *ngSwitchCase="'text'">
{{row[column.id].value}}
</div>
<div *ngSwitchCase="'modal'">
<lcm-modal [modalText]="row[column.id].inputs.modalText"
[modalTitle]="row[column.id].inputs.modalTitle"
[modalBody]="row[column.id].inputs.modalBody"></lcm-modal>
</div>
</div>
</clr-dg-cell>
</clr-dg-row>
И, наконец, мой gridFilter
class GridFilter implements StringFilter<any>{
columnId;
accepts(row: any, search: string):boolean {
console.log(row);
console.log(search);
console.log(this.columnId);
console.log(row[this.columnId].value);
return row[this.columnId].value.toLowerCase().indexOf(search)>=0;
}
}
Теперь проблема в том, что я не могу использовать clrDgField для автоматической фильтрации, поскольку свойства строк являются объектами, а не строкой.
Чтобы преодолеть это, я создал специальный фильтр, который фильтрует на основе значения объекта строки.
Проблема в том, что он отлично работает, когда я применяю только фильтр к одному столбцу, но для фильтров по двум столбцам он не работает и не показывает результата.
Вот исходное изображение сетки