4 用于过滤转发器的复选框组答案

【问题标题】：4 Checkbox group to filter a repeater4 用于过滤转发器的复选框组
【发布时间】：2021-04-19 07:19:31
【问题描述】：

我想为不同的过滤器创建一个包含 3 个不同复选框组的食谱页面。

目前，我有 1 个复选框组并将其链接到中继器。

谁能帮助指导我如何向转发器添加 2 个复选框组？

我去网上挖掘，但还没有找到解决办法

import wixData from 'wix-data';

const databaseName = 'Recipes1';
const databaseField = 'tags';

$w.onReady(function() {
  $w('#checkboxGroup1').onChange((event) => {
    const selectedBox = $w('#checkboxGroup1').value;
    addItemstoRepeater(selectedBox);
  })
});


function addItemstoRepeater(selectedOption = []) {
  let dataQuery = wixData.query(databaseName);

  if (selectedOption.length > 0) {
    dataQuery = dataQuery.hasSome(databaseField, selectedOption);
  }

  dataQuery
    .find()
    .then(results => {
      const filtereditemsReady = results.items;
      $w('#repeater1').data = filtereditemsReady;
    })
}

【问题讨论】：

组是什么意思？转发器呈现items，而不是组。不幸的是，没有“中继器的中继器”。您可以手动添加更多中继器，每个可能的组一个。
抱歉。我的意思是我希望再创建 2 个复选框来过滤中继器表。例如，用户可以按菜系（复选框 1）、菜肴类型（复选框 2）和配料（复选框 3）过滤表。之后，表格将根据用户选择显示结果

标签： velo

【解决方案1】：

您正在做的是根据用户选择获取项目的数据查询。

为了构建过滤器，您需要使用dataset、connect the dataset to your repeater 或表格。查看filter example here，它向您展示了如何使用多项选择过滤数据集。

在我看来，3 个复选框组的过滤功能应该如下所示

let checkbox1;
let checkbox2;
let checkbox3;

const filter = (ck1, ck2, ck3) => { 

    if(checkbox1 !== ck1 || checkbox2 !== ck2 || checkbox3 !== ck3) {
        let newFilter = wixData.filter();

        if(ck1)
        newFilter = newFilter.hasSome('fieldKey1', ck1);
        
        if(ck2)
        newFilter = newFilter.hasSome('fieldKey2', ck2);
        
        if(ck3)
        newFilter = newFilter.hasSome('fieldKey3', ck3);
        
        $w("#datasetId").setFilter(newFilter);
        
        setVariables(ck1, ck2, ck3);
    }
}

const setVariables = (ck1, ck2, ck3) => {
    checkbox1 = ck1;
    checkbox2 = ck2;
    checkbox3 = ck3;
}

您需要研究示例以根据您的需要适应代码。

【讨论】：