DevExtreme DataGrid服务端分页排序正常但过滤下拉仅显示空值问题

问题原因 #

你返回的过滤选项数组结构不符合DevExtreme DataGrid的要求，DataGrid读取不到对应列的字段值，所以过滤下拉列表全显示(Blanks)。

正确返回结构规则 #

当loadOptions.group存在值时，是DataGrid在请求指定列的唯一过滤值，返回结构要求如下：

1. 先从loadOptions.group[0].selector获取当前请求过滤值的目标列字段名
2. 返回的数组中，每一项都必须包含上述目标列字段名作为属性key，值为对应的过滤选项内容，可选附带count字段表示该值的出现次数
3. 直接返回数组即可，不需要额外封装ArrayStore

修正后的代码示例 #

getOrderDataStore(
    orderSearchRequest: OrderSearchRequest,
    failureAction: ActionCreator<string, FunctionWithParametersType<any, any>>,
    store: Store): CustomStore {
    return new CustomStore({
      load: (loadOptions) => {
        console.log({ loadOptions: loadOptions });
        orderSearchRequest.pageSize = loadOptions.take;
        orderSearchRequest.page = loadOptions.take === 0 ? 1 : Math.ceil(loadOptions.skip / loadOptions.take) + 1;

        if (loadOptions.group) {
          console.log("请求列过滤唯一值");
          // 获取当前请求的目标列字段名
          const targetColumn = loadOptions.group[0].selector;
          // 构造返回数组，每个对象必须包含targetColumn对应的属性
          const filterOptions = [
            { [targetColumn]: '选项1', count: 10 },
            { [targetColumn]: '选项2', count: 15 },
            { [targetColumn]: '选项3', count: 7 }
          ];
          // 直接返回数组即可
          return filterOptions;
        }
        else {
          return this.searchOrder(orderSearchRequest)
            .toPromise()
            .then(response => {
              console.log({ getOrderDataStore: response.result.orders })
              return {
                data: response.result.orders,
                totalCount: response.result.totalCount
              };
            })
            .catch(() => {
              store.dispatch(failureAction({ error: 'Data loading error' }))
              throw 'Data loading error'
            });
        }
      },
    });
  }

如果你是从后端拉取去重值，只需要把后端返回的去重列表，按上述规则给每个元素加上目标列字段的属性即可。

内容的提问来源于stack exchange，提问作者Mauricio Gracia Gutierrez