私はこのプロジェクトではvuejsを使用していますが、この問題は必ずしも結びついていませんが、vue-wayがある場合はそれをお勧めします。vuejs - 複数のフィルタに基づくテーブルの検索結果のキャッシュ
私はテーブルを構築しています。これにより、ユーザーは列単位のフィルタ(この場合は単純input
)を持つことができます。列は動的なので、データの量(行数千、ただし100,000未満)です。ここで
// example data
var columns = ['id', 'title', 'date', 'colour']
var data = [{ id: 1, title: 'Testentry 1', date: '2017-02-21T07:10:55.124Z', colour: 'green'}]
は問題です:私は、列を反復検索入力が存在するかどうかをチェックし、もしそうなら、私はSEARCHQUERYに基づいてデータをフィルタ処理しようとしています。 IDの場合、時間複雑度はO(n)
です。さらにタイトルの検索がわかっている場合は、最初の検索クエリの結果を再利用して、データの量を大幅に減らすことができます。
検索クエリはオブジェクトsearch
に格納され、フィルタ処理されたデータは計算されたプロパティで、search
が変更されるたびに更新されます。どのように動作するかは、もし私がtitle
の検索クエリを変更すると、その検索クエリは変更されませんでしたが、IDの検索クエリも再評価されます。
これは、各列に対してフィルタリングされたデータのキャッシュを必要とします。そして、進行中の列だけを照会する必要があります。
編集:追加のフィルタリングのためのコード:
filteredRows() {
var rows = this.data
for (var i = 0; i < this.columns.length; i++) {
var column = this.columns[i].name
var search = this.tSearch[column]
if (!search && search.length === 0) continue
console.log(column + ': ' + ' (' + search + ') -> ' + rows.length)
rows = _.filter(rows, (row) => {
var value = '' + row[column]
value.search(search) > -1
})
}
return rows
}
計算されたプロパティのコードを確認できますか? – Justin
@ジャスティン:確かに、私はそれを追加しました。 – Johannes