KendoUI里Grid对于状态类数字自定义行内检索设置

最新推荐文章于 2024-08-02 13:35:44 发布

一朝入坑，终生为码农

最新推荐文章于 2024-08-02 13:35:44 发布

阅读量47

点赞数

文章标签：前端 typescript vue

本文链接：https://blog.csdn.net/lsh499742959/article/details/134611480

版权

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: '请选择状态'
    });
  }

以上就是配置方式。

效果：