时间戳

首页 > 解决方案 > 如何使用条件过滤 javascript 甘特图并处理空输入？

javascript - 如何使用条件过滤 javascript 甘特图并处理空输入？

问题描述

我最近开始使用基于 DHTMLX javascript 的甘特图。我对过滤器有一些问题，我认为这些问题与图表本身无关，而是与 javascript 相关。

因此，可以通过语句传递一些条件并在满足这些条件时返回来过滤甘特图。我所有的条件值都来自选择的输入，这些输入代表范围。iftrue

<input type="text" class="k-textbox" id="bedsStart" />
<input type="text" class="k-textbox" id="bedsEnd" />

<input type="text" class="k-textbox" id="deckStart" />
<input type="text" class="k-textbox" id="deckEnd" />

<button type="button" id="filterSort">Set Filters</button>

当您单击过滤器按钮时，会触发单击事件并从输入字段中收集值。

$("#filterSort").on("click", function (e) {        
    let bedsStart = $('#bedsStart').val();
    let bedsEnd = $('#bedsEnd').val();
    let deckStart = $('#deckStart').val();
    let deckEnd = $('#deckEnd').val();

然后根据 DHTMLX 的文档将这些值作为条件传递给过滤器：

    gantt.attachEvent("onBeforeTaskDisplay", function (id, task) {
        if (task.crane >= craneStart && task.crane <= craneEnd) {
            return true
        }        
        return false;
    });
    gantt.init("ganttReport");
}

问题是如果任何文本输入为空/null，则过滤器将失败并且不返回任何内容。有没有办法通过不包含这些空值或动态指定要使用的过滤器来处理这些空值？

过滤器似乎只能返回true，false因此有多个if语句不起作用，因为它始终是最后一个语句，它会在先前的迭代被覆盖的情况下提供结果，即

if(condition1)
{
    return true
}
if(condition2)
{
    return true
}
return false

上面的代码不起作用，只有 condition2 会被使用，因为 condition1 会被覆盖。所以我不能以这种方式或使用if else.

任何人都可以提供一个解决方案来解决我如何将所有这些条件传递给这个单一的语句并处理空值吗？

标签： javascriptjquerydhtmlx

解决方案

这是一个工作示例，您可以尝试仅使用 startDate/endDate 或两者： https ://codesandbox.io/s/7qz1kw9vq

推荐阅读