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

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

以上就是配置方式。

效果:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值