通过Wix中的多个选择标签过滤转发器项目

问题描述

我正在构建一个带有多个选择标签字段（departmentTags、orgnisationTags、sectionTags、statusTags）的数据收集（项目）的 wix 网站。我在我的网站上创建了一个转发器来显示数据集合，并希望根据多个选择标签过滤器过滤显示的项目。

目前我仅根据一组选择标签 (departmentTags) 过滤了列表。 So when a departmentTag is selected the list of projects which belong to that department are filtered

import wixData from 'wix-data';

const collectionName = 'projects';

$w.onReady(function () { 

    setRepeatedItemsInRepeater()
    loadDataToRepeater()

    $w('#departmentTags').onChange((event) => {
        const selectedTags = $w('#departmentTags').value
        loadDataToRepeater(selectedTags)
    })
    
});

function setRepeatedItemsInRepeater() {
    $w('#projectRepeater').onItemReady(($item,itemData) => {

        $item('#projectimage').src = itemData.Image;
        $item('#projectTitle').text = itemData.Title;
        $item('#projectSummary').text = itemData.Summary;

    })
}

function loadDataToRepeater(selectedCategories = []) {

    let dataQuery = wixData.query(collectionName)

    if (selectedCategories.length > 0) {
        dataQuery = dataQuery.hasAll('department',selectedCategories)
    }
    
    dataQuery
        .find()
        .then(results => {
            const itemsReadyForRepeater = results.items
            $w('#projectRepeater').data = itemsReadyForRepeater;
        })
}

我现在还想在过滤项目时包含其余的选择标签。例如，我希望用户能够选择部门、组织和状态，并且中继器上列出的项目要按所有三个类别进行过滤。

解决方法

听起来您需要将所有标签元素的 onChange 设置为这样的函数：

function tagChange() {
  const selectedDepts = $w('#departmentTags').value;
  const selectedOrgs = $w('#organizationTags').value;
  const selectedStatuses = $w('#statusTags').value;

  loadDataToRepeater(selectedDepts,selectedOrgs,selectedStatuses);
}

然后，将 loadDataToRepeater 函数修改为如下所示：

function loadDataToRepeater(selectedDepts,selectedStatuses) {

    wixData.query(collectionName)
      .hasAll('department',selectedDepts)
      .hasAll('organization',selectedOrgs)
      .hasAll('status',selectedStatuses)
      .find()
      .then(results => {
        $w('#projectRepeater').data = results.items;
      });
}