Clever Geek Handbook

ページネーションを使用してテーブルの列のデータを検索する（前部）

前書き

みなさん、こんにちは。私の名前はアレクサンダーです。現在、私はMegafonでフロントエンド開発者として働いています。データ検索の問題は常に特に複雑であり、アプローチではしばしば非標準的です。今日は、IoTプラットフォームの開発中にごく最近解決しなければならなかった1つの興味深い問題に焦点を当てたいと思います。ただし、このようなタスクは、RESTAPIを介して動的にデータが読み込まれる他のプロジェクトでも発生する可能性があります。ページネーション中、スクロール中、またはその他の何かでロードされているかどうか...





問題がある

それは思われるでしょう：何が困難である可能性があります。特に正面だけの場合は？結局のところ、すべての検索アルゴリズムは主にバックエンドに実装されています。実際、はい、いいえ。複数のページのページ付けと各列のフィルターがある単純なスプレッドシートを想像してみましょう。下記参照。





列にフィルターがあるテーブル
列にフィルターがあるテーブル

このプレートでは、BS番号列によるフィルターが開いています。簡単に言うと、フィルター入力フィールドに任意の文字を入力すると、ドロップダウンに適切なオプションが表示されます。それらのいずれかをクリックすると、この要素でテーブル内のデータをフィルタリングできます。





必要なオプションを使用して、このようなドロップダウンをどのように表示できますか？ 





ソリューションオプション

  1. filter includes ( ) . , , . . .





  2. 1- , . , 0. 1 ? .





  3. , . “” , .





    . . : , , .





  1. , , . config.





  2. . , debounce.





  3. / loader









, JS React , , JS. . 





, . , ( ) . 2 .





:





{
  id: 'address',
  title: ' ',
  filter: filters.address,
  checked: true,
  minWidth: 160
}

:





address: {
  type: 'includes',
  name: 'addrFilter',
  options: {
    default: {
      values: 'objectsList',
      fetchFunc: 'fetchObjectsList',
      calcFunc: 'address'
    }
  }
}

- . .





options . :





  • fetchFunc - thunk ,





  • values - ,





  • calcFunc -





calcFun. , . , . : = + + …





アドレスフィルター

. :





//object includes calc functions
const calculatedData = useMemo(() => (
  {
    default: (values) =>
    {
      //default calculate
    },
    address: (values) =>
    {
      //calculate with generateAddress function, for example
    },
    ...
	}
), [...]);

//using this object (calcFunc from config):
const data = calculatedData[calcFunc || 'default'](values)

. . , - . :





// debounce function
const debounce = (fn, ms = 0) => {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn.apply(this, args), ms);
  };
};

//debounceFetch function
const debounceFetch = debounce(async (func, args) => 
  typeof func === 'function' && (await func(args)), 500);

//sending request
useEffect(() => {
  debounceFetch(actions[fetchFunc], { 
    filter: { [filterName]: filterValue || null } 
  });
}, [filter]);

. - , , . , , , isLoading. , isLoadingObjects. selector kea, = true , isLoading, true.





kea, redux - - , . - . kea =)





anyLoading===true, .





. , , calcFunc .





, , useFiltersOptions.





, : , , . , , .





, , .







More articles:


All Articles