Grid的中字符串类的列,自带的行内检索是比较好用的,但是有些是状态类的,字段是数字,对于检索很不方便,检索的时候也时对应的数字才能查询到,但是对于用户来说这种字段对应的数字不知道对应什么状态。那有没有办法自定义这块呢?答案是肯定的,组件内提供了解决此类的方法。
接下来就告诉你怎么设置。
{
columnInfo: {
field: '试验状态',
title: '状态',
width: 100,
filterable: { ui: this.filterStates, extra: false },
template: (e) => {
let state = e.试验状态;
if (isNull(state)) {
state = 0;
}
return '<span style="color:' + TrTaskStatusColorEnum[state] + '">' + TrTaskStatusEnum[state] + '</span>';
}
},
type: 'number',
}
通过设置filterable属性来自定义行内选择项进行检索。
filterStates(element){
const datas:any[]=[];
for(var key in TrTaskStatusEnum){
if(IsNumber(key)){
continue;
}
datas.push({
text:key,
value:TrTaskStatusEnum[key]
});
}
element.kendoDropDownList({
dataSource: {
data: datas
},
dataTextField: 'text',
dataValueField: 'value',
index: 0,
optionLabel: '请选择状态'
});
}
以上就是配置方式。
效果: