ahooksjs / useTable

A Progressive Solution for Query Table Scene
https://usetable-ahooks.js.org
MIT License
46 stars 6 forks source link

请问有考虑支持前端搜索、过滤、排序的模式吗,即表格数据初试查询时接口返回全量数据,表格内操作均是前端行为过滤 #12

Closed caojinjie closed 3 years ago

caojinjie commented 3 years ago

场景说明:有一些表格由于整体数据量不大,后端考虑没有性能隐患,只返回一次完整数据,其他对数据的过滤均由前端根据完整数据自己进行处理;而需求期望页面上也能够使用分页等形式来遍于用户操作,当前的处理逻辑则是自行编码按照sort、pageSize等参数进行过滤,不知道useNextFormTable是否能考虑支持这种场景;

monkindey commented 3 years ago

写一个插件

import { REQUEST_SYMBOL } from '@ahooksjs/next-form-table'

const useLocalService = (fn) => {
  const ref = useRef(true);
  const response = useRef()
  return {
    middlewares: (ctx, next) => {
      return next().then(() => {
        if (ref.current) {
          response.current = ctx.response;
          ctx[REQUEST_SYMBOL].service = (params, options) => {
            return Promise.resolve(fn(response.current, params, options))
          }

          ref.current = false;
          ctx.response = fn(response.current, params, options)
        }
      })
    }
  }
}

fn 你可以根据返回值和参数做一些本地的过滤,可以试下因为我只是盲敲而已,不过大体是这样子

caojinjie commented 3 years ago

写一个插件

import { REQUEST_SYMBOL } from '@ahooksjs/next-form-table'

const useLocalService = (fn) => {
  const ref = useRef(true);
  const response = useRef()
  return {
    middlewares: (ctx, next) => {
      return next().then(() => {
        if (ref.current) {
          response.current = ctx.response;
          ctx[REQUEST_SYMBOL].service = (params, options) => {
            return Promise.resolve(fn(response.current, params, options))
          }

          ref.current = false;
          ctx.response = fn(response.current, params, options)
        }
      })
    }
  }
}

fn 你可以根据返回值和参数做一些本地的过滤,可以试下因为我只是盲敲而已,不过大体是这样子

实践编码如下:

import { useRef } from 'react';
import { REQUEST_SYMBOL } from '@ahooksjs/next-form-table';

const useLocalService = (fn) => {
  const ref = useRef(true);
  return {
    middlewares: async (ctx, next) => {
      const res = await next();
      if (ref.current) {
        ctx[REQUEST_SYMBOL].service = (params, options) => {
          return Promise.resolve(fn(res, params, options));
        };
        ctx.response = fn(ctx.response, ctx.params, ctx.options);
        ref.current = false;
      }
    },
  };
};
export default useLocalService;