我正在尝试通过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进行自动过滤,因为行的属性是对象而不是字符串。
所以为了克服这个问题,我制作了一个自定义过滤器,它根据行对象的值进行过滤。
问题是,当我在单个列上仅应用过滤器时,它可以正常工作,但对于两列上的过滤器,它会失败并且不会显示任何结果。
Here is the original image of the grid
答案 0 :(得分:1)
正如documentation所说,
您可以使用标准的点分隔语法将模型中的属性绑定到您想要的属性:
[clrDgField]="'my.deep.property'"
因此,在您的情况下,您可以完全绕过自定义过滤器,只需绑定[clrDgField]="column.id + '.value'"
。
至于您的自定义过滤器失败的原因,如果没有运行示例,很难进行调查,屏幕截图无法传达足够的信息。